Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@irojs/iro-core

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@irojs/iro-core - npm Package Compare versions

Comparing version 0.0.6 to 1.0.0

3

dist/box.d.ts

@@ -27,5 +27,4 @@ import { IroColor } from './color';

* @param y - global input y position
* @param bounds - box element bounding box
*/
export declare function getBoxValueFromInput(props: Partial<BoxOptions>, x: number, y: number, bounds: any): {
export declare function getBoxValueFromInput(props: Partial<BoxOptions>, x: number, y: number): {
s: number;

@@ -32,0 +31,0 @@ v: number;

1061

dist/iro-core.es.js

@@ -1,2 +0,1061 @@

var t="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",r="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",n="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",e=new RegExp("rgb"+r),i=new RegExp("rgba"+n),a=new RegExp("hsl"+r),s=new RegExp("hsla"+n),h=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),o=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),u=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),l=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),g=Math.log,c=Math.round,f=Math.floor;function v(t,r){var n=t.indexOf("%")>-1,e=parseFloat(t);return n?r/100*e:e}function b(t){return parseInt(t,16)}function d(t){return t.toString(16).padStart(2,"0")}var p=function(t,r){this.$={h:0,s:0,v:0,a:1},t&&this.set(t),this.onChange=r,this.initialValue=Object.assign({},this.$)},x={hsv:{configurable:!0},hsva:{configurable:!0},hue:{configurable:!0},saturation:{configurable:!0},value:{configurable:!0},alpha:{configurable:!0},kelvin:{configurable:!0},rgb:{configurable:!0},rgba:{configurable:!0},hsl:{configurable:!0},hsla:{configurable:!0},rgbString:{configurable:!0},rgbaString:{configurable:!0},hexString:{configurable:!0},hex8String:{configurable:!0},hslString:{configurable:!0},hslaString:{configurable:!0}};p.prototype.set=function(t){if("string"==typeof t)/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t)?this.hexString=t:/^rgba?/.test(t)?this.rgbString=t:/^hsla?/.test(t)&&(this.hslString=t);else{if("object"!=typeof t)throw new Error("Invalid color value");t instanceof p?this.hsv=t.hsv:"object"==typeof t&&"r"in t&&"g"in t&&"b"in t?this.rgb=t:"object"==typeof t&&"h"in t&&"s"in t&&"v"in t?this.hsv=t:"object"==typeof t&&"h"in t&&"s"in t&&"l"in t&&(this.hsl=t)}},p.prototype.setChannel=function(t,r,n){var e;this[t]=Object.assign({},this[t],((e={})[r]=n,e))},p.prototype.reset=function(){this.hsva=this.initialValue},p.prototype.clone=function(){return new p(this)},p.prototype.unbind=function(){this.onChange=void 0},p.hsvToRgb=function(t){var r=t.h/60,n=t.s/100,e=t.v/100,i=f(r),a=r-i,s=e*(1-n),h=e*(1-a*n),o=e*(1-(1-a)*n),u=i%6;return{r:255*[e,h,s,s,o,e][u],g:255*[o,e,e,h,s,s][u],b:255*[s,s,o,e,e,h][u]}},p.rgbToHsv=function(t){var r=t.r/255,n=t.g/255,e=t.b/255,i=Math.max(r,n,e),a=Math.min(r,n,e),s=i-a,h=0,o=i,u=0===i?0:s/i;switch(i){case a:h=0;break;case r:h=(n-e)/s+(n<e?6:0);break;case n:h=(e-r)/s+2;break;case e:h=(r-n)/s+4}return{h:60*h,s:100*u,v:100*o}},p.hsvToHsl=function(t){var r=t.s/100,n=t.v/100,e=(2-r)*n,i=e<=1?e:2-e;return{h:t.h,s:100*(i<1e-9?0:r*n/i),l:50*e}},p.hslToHsv=function(t){var r=2*t.l,n=t.s*(r<=100?r:200-r)/100;return{h:t.h,s:100*(r+n<1e-9?0:2*n/(r+n)),v:(r+n)/2}},p.kelvinToRgb=function(t){var r,n,e,i=t/100;return i<66?(r=255,n=-155.25485562709179-.44596950469579133*(n=i-2)+104.49216199393888*g(n),e=i<20?0:.8274096064007395*(e=i-10)-254.76935184120902+115.67994401066147*g(e)):(r=351.97690566805693+.114206453784165*(r=i-55)-40.25366309332127*g(r),n=325.4494125711974+.07943456536662342*(n=i-50)-28.0852963507957*g(n),e=255),{r:f(r),g:f(n),b:f(e)}},p.rgbToKelvin=function(t){for(var r,n=t.r,e=t.b,i=1e3,a=4e4;a-i>.4;){var s=p.kelvinToRgb(r=.5*(a+i));s.b/s.r>=e/n?a=r:i=r}return r},x.hsv.get=function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},x.hsv.set=function(t){var r=this.$;if(t=Object.assign({},r,t),this.onChange){var n={h:!1,v:!1,s:!1,a:!1};for(var e in r)n[e]=t[e]!=r[e];this.$=t,(n.h||n.s||n.v||n.a)&&this.onChange(this,n)}else this.$=t},x.hsva.get=function(){return Object.assign({},this.$)},x.hsva.set=function(t){this.hsv=t},x.hue.get=function(){return this.$.h},x.hue.set=function(t){this.hsv={h:t}},x.saturation.get=function(){return this.$.s},x.saturation.set=function(t){this.hsv={s:t}},x.value.get=function(){return this.$.v},x.value.set=function(t){this.hsv={v:t}},x.alpha.get=function(){return this.$.a},x.alpha.set=function(t){this.hsv=Object.assign({},this.hsv,{a:t})},x.kelvin.get=function(){return p.rgbToKelvin(this.rgb)},x.kelvin.set=function(t){this.rgb=p.kelvinToRgb(t)},x.rgb.get=function(){var t=p.hsvToRgb(this.$),r=t.g,n=t.b;return{r:c(t.r),g:c(r),b:c(n)}},x.rgb.set=function(t){this.hsv=Object.assign({},p.rgbToHsv(t),{a:void 0===t.a?1:t.a})},x.rgba.get=function(){return Object.assign({},this.rgb,{a:this.alpha})},x.rgba.set=function(t){this.rgb=t},x.hsl.get=function(){var t=p.hsvToHsl(this.$),r=t.s,n=t.l;return{h:c(t.h),s:c(r),l:c(n)}},x.hsl.set=function(t){this.hsv=Object.assign({},p.hslToHsv(t),{a:void 0===t.a?1:t.a})},x.hsla.get=function(){return Object.assign({},this.hsl,{a:this.alpha})},x.hsla.set=function(t){this.hsl=t},x.rgbString.get=function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},x.rgbString.set=function(t){var r,n,a,s,h=1;if((r=e.exec(t))?(n=v(r[1],255),a=v(r[2],255),s=v(r[3],255)):(r=i.exec(t))&&(n=v(r[1],255),a=v(r[2],255),s=v(r[3],255),h=v(r[4],1)),!r)throw new Error("Invalid rgb string");this.rgb={r:n,g:a,b:s,a:h}},x.rgbaString.get=function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},x.rgbaString.set=function(t){this.rgbString=t},x.hexString.get=function(){var t=this.rgb;return"#"+d(t.r)+d(t.g)+d(t.b)},x.hexString.set=function(t){var r,n,e,i,a=255;if((r=h.exec(t))?(n=17*b(r[1]),e=17*b(r[2]),i=17*b(r[3])):(r=o.exec(t))?(n=17*b(r[1]),e=17*b(r[2]),i=17*b(r[3]),a=17*b(r[4])):(r=u.exec(t))?(n=b(r[1]),e=b(r[2]),i=b(r[3])):(r=l.exec(t))&&(n=b(r[1]),e=b(r[2]),i=b(r[3]),a=b(r[4])),!r)throw new Error("Invalid hex string");this.rgb={r:n,g:e,b:i,a:a/255}},x.hex8String.get=function(){var t=this.rgba;return"#"+d(t.r)+d(t.g)+d(t.b)+d(f(255*t.a))},x.hex8String.set=function(t){this.hexString=t},x.hslString.get=function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},x.hslString.set=function(t){var r,n,e,i,h=1;if((r=a.exec(t))?(n=v(r[1],360),e=v(r[2],100),i=v(r[3],100)):(r=s.exec(t))&&(n=v(r[1],360),e=v(r[2],100),i=v(r[3],100),h=v(r[4],1)),!r)throw new Error("Invalid hsl string");this.hsl={h:n,s:e,l:i,a:h}},x.hslaString.get=function(){var t=this.hsla;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},x.hslaString.set=function(t){this.hslString=t},Object.defineProperties(p.prototype,x);var w={sliderShape:"bar",sliderType:"value",minTemperature:2200,maxTemperature:11e3};function m(t){var r;return(r={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,r}function y(t){var r=t.width,n=t.sliderSize,e=t.borderWidth,i=t.handleRadius,a=t.padding,s="horizontal"===t.layoutDirection;return n=n||2*a+2*i+2*e,"circle"===t.sliderShape?{handleStart:t.padding+t.handleRadius,handleRange:r-2*a-2*i-2*e,width:r,height:r,cx:r/2,cy:r/2,radius:r/2-e/2}:{handleStart:n/2,handleRange:r-n,radius:n/2,x:0,y:0,width:s?n:r,height:s?r:n}}function S(t,r){var n=r.hsva;switch(t.sliderType){case"alpha":return 100*n.a;case"kelvin":var e=t.minTemperature;return Math.max(0,Math.min((r.kelvin-e)/(t.maxTemperature-e)*100,100));case"hue":return n.h/=3.6;case"saturation":return n.s;case"value":default:return n.v}}function M(t,r,n,e){var i,a=y(t),s=a.handleRange,h=a.handleStart;i="horizontal"===t.layoutDirection?-1*(n-e.top)+s+h:r-(e.left+h),i=Math.max(Math.min(i,s),0);var o=Math.round(100/s*i);switch(t.sliderType){case"kelvin":var u=t.minTemperature;return u+o/100*(t.maxTemperature-u);case"alpha":return o/100;case"hue":return 3.6*o;default:return o}}function T(t,r){var n=y(t),e=n.handleRange,i=n.handleStart,a="horizontal"===t.layoutDirection,s=a?n.width/2:n.height/2,h=i+S(t,r)/100*e;return a&&(h=-1*h+e+2*i),{x:a?s:h,y:a?h:s}}function R(t,r){var n=r.hsv;switch(t.sliderType){case"alpha":var e=r.rgb;return[[0,"rgba("+e.r+","+e.g+","+e.b+",0)"],[100,"rgb("+e.r+","+e.g+","+e.b+")"]];case"kelvin":for(var i=[],a=t.minTemperature,s=t.maxTemperature,h=s-a,o=a,u=0;o<s;o+=h/8,u+=1){var l=p.kelvinToRgb(o);i.push([12.5*u,"rgb("+l.r+","+l.g+","+l.b+")"])}return i;case"hue":return[[0,"#f00"],[16.666,"#ff0"],[33.333,"#0f0"],[50,"#0ff"],[66.666,"#00f"],[83.333,"#f0f"],[100,"#f00"]];case"saturation":var g=p.hsvToHsl({h:n.h,s:0,v:n.v}),c=p.hsvToHsl({h:n.h,s:100,v:n.v});return[[0,"hsl("+g.h+","+g.s+"%,"+g.l+"%)"],[100,"hsl("+c.h+","+c.s+"%,"+c.l+"%)"]];case"value":default:var f=p.hsvToHsl({h:n.h,s:n.s,v:100});return[[0,"#000"],[100,"hsl("+f.h+","+f.s+"%,"+f.l+"%)"]]}}function A(t){var r="horizontal"===t.layoutDirection;return{x1:"0%",y1:r?"100%":"0%",x2:r?"0%":"100%",y2:"0%"}}function k(t){var r=t.width/2;return{width:t.width,radius:r-t.borderWidth,cx:r,cy:r}}function $(t,r,n){var e=t.wheelAngle,i=t.wheelDirection;return((r=!n&&"clockwise"===i||n&&"anticlockwise"===i?(n?180:360)-(e-r):e+r)%360+360)%360}function F(t,r){var n=r.hsv,e=k(t),i=e.cx,a=e.cy,s=t.width/2-t.padding-t.handleRadius-t.borderWidth,h=(180+$(t,n.h,!0))*(Math.PI/180),o=n.s/100*s,u="clockwise"===t.wheelDirection?-1:1;return{x:i+o*Math.cos(h)*u,y:a+o*Math.sin(h)*u}}function j(t,r,n,e){var i=k(t),a=t.width/2-t.padding-t.handleRadius-t.borderWidth;r=i.cx-(r-e.left),n=i.cy-(n-e.top);var s=$(t,Math.atan2(-n,-r)*(180/Math.PI)),h=Math.min(Math.sqrt(r*r+n*n),a);return{h:Math.round(s),s:Math.round(100/a*h)}}function E(t){var r;return(r={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,r}function O(t){var r=t.width;return{width:r,height:r,radius:t.padding+t.handleRadius}}function D(t,r,n,e){var i=O(t),a=i.radius,s=(n-=e.top+a)/(i.height-2*a)*100;return{s:Math.max(0,Math.min((r-=e.left+a)/(i.width-2*a)*100,100)),v:Math.max(0,Math.min(100-s,100))}}function H(t,r){var n=O(t),e=n.radius,i=r.hsv,a=n.height-2*e;return{x:e+i.s/100*(n.width-2*e),y:e+(a-i.v/100*a)}}function I(t,r){return[[[0,"#fff"],[100,"hsl("+r.hue+",100%,50%)"]],[[0,"rgba(0,0,0,0)"],[100,"#000"]]]}var P=document.getElementsByTagName("base");function z(t){var r=window.navigator.userAgent,n=/^((?!chrome|android).)*safari/i.test(r),e=/iPhone|iPod|iPad/i.test(r),i=window.location;return(n||e)&&P.length>0?i.protocol+"//"+i.host+i.pathname+i.search+t:t}function C(t,r,n,e,i){var a=i-e<=180?0:1;return e*=Math.PI/180,i*=Math.PI/180,"M "+(t+n*Math.cos(i))+" "+(r+n*Math.sin(i))+" A "+n+" "+n+" 0 "+a+" 0 "+(t+n*Math.cos(e))+" "+(r+n*Math.sin(e))}function W(t,r,n,e){for(var i=0;i<e.length;i++){var a=e[i].x-r,s=e[i].y-n;if(Math.sqrt(a*a+s*s)<t.handleRadius)return i}return null}var L={width:300,height:300,handleRadius:8,handleSvg:null,handleProps:{x:0,y:0},color:"#fff",colors:[],borderColor:"#fff",borderWidth:0,wheelLightness:!0,wheelAngle:0,wheelDirection:"anticlockwise",layoutDirection:"vertical",sliderSize:null,sliderMargin:12,padding:6};export{p as IroColor,w as sliderDefaultOptions,m as getSliderStyles,y as getSliderDimensions,S as getCurrentSliderValue,M as getSliderValueFromInput,T as getSliderHandlePosition,R as getSliderGradient,A as getSliderGradientCoords,k as getWheelDimensions,$ as translateWheelAngle,F as getWheelHandlePosition,j as getWheelValueFromInput,E as getBoxStyles,O as getBoxDimensions,D as getBoxValueFromInput,H as getBoxHandlePosition,I as getBoxGradients,z as resolveSvgUrl,C as getSvgArcPath,W as getHandleAtPoint,L as iroColorPickerOptionDefaults};
// Some regular expressions for rgb() and hsl() Colors are borrowed from tinyColor
// https://github.com/bgrins/TinyColor
// Kelvin temperature math borrowed from Neil Barlett's implementation
// from https://github.com/neilbartlett/color-temperature
// https://www.w3.org/TR/css3-values/#integers
var CSS_INTEGER = '[-\\+]?\\d+%?'; // http://www.w3.org/TR/css3-values/#number-value
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome
var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')'; // Parse function params
// Parens and commas are optional, and this also allows for whitespace between numbers
var PERMISSIVE_MATCH_3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
var PERMISSIVE_MATCH_4 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; // Regex patterns for functional color strings
var REGEX_FUNCTIONAL_RGB = new RegExp('rgb' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_RGBA = new RegExp('rgba' + PERMISSIVE_MATCH_4);
var REGEX_FUNCTIONAL_HSL = new RegExp('hsl' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_HSLA = new RegExp('hsla' + PERMISSIVE_MATCH_4); // Color string parsing regex
var HEX_START = '^(?:#?|0x?)';
var HEX_INT_SINGLE = '([0-9a-fA-F]{1})';
var HEX_INT_DOUBLE = '([0-9a-fA-F]{2})';
var REGEX_HEX_3 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_4 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$');
var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds
var KELVIN_MIN = 1000;
var KELVIN_MAX = 40000; // Math shorthands
var log = Math.log;
var round = Math.round;
var floor = Math.floor;
/**
* @desc Parse a css unit string - either regular int or a percentage number
* @param str - css unit string
* @param max - max unit value, used for calculating percentages
*/
function parseUnit(str, max) {
var isPercentage = str.indexOf('%') > -1;
var num = parseFloat(str);
return isPercentage ? max / 100 * num : num;
}
/**
* @desc Parse hex str to an int
* @param str - hex string to parse
*/
function parseHexInt(str) {
return parseInt(str, 16);
}
/**
* @desc Convert nunber into to 2-digit hex
* @param int - number to convert
*/
function intToHex(int) {
return int.toString(16).padStart(2, '0');
}
var IroColor = function IroColor(value, onChange) {
// The default Color value
this.$ = {
h: 0,
s: 0,
v: 0,
a: 1
};
if (value) { this.set(value); } // The watch callback function for this Color will be stored here
this.onChange = onChange;
this.initialValue = Object.assign({}, this.$); // copy initial value
};
var prototypeAccessors = { hsv: { configurable: true },hsva: { configurable: true },hue: { configurable: true },saturation: { configurable: true },value: { configurable: true },alpha: { configurable: true },kelvin: { configurable: true },rgb: { configurable: true },rgba: { configurable: true },hsl: { configurable: true },hsla: { configurable: true },rgbString: { configurable: true },rgbaString: { configurable: true },hexString: { configurable: true },hex8String: { configurable: true },hslString: { configurable: true },hslaString: { configurable: true } };
/**
* @desc Set the Color from any valid value
* @param value - new color value
*/
IroColor.prototype.set = function set (value) {
if (typeof value === 'string') {
if (/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(value)) {
this.hexString = value;
} else if (/^rgba?/.test(value)) {
this.rgbString = value;
} else if (/^hsla?/.test(value)) {
this.hslString = value;
}
} else if (typeof value === 'object') {
if (value instanceof IroColor) {
this.hsv = value.hsv;
} else if (typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value) {
this.rgb = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'v' in value) {
this.hsv = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'l' in value) {
this.hsl = value;
}
} else {
throw new Error('Invalid color value');
}
};
/**
* @desc Shortcut to set a specific channel value
* @param format - hsv | hsl | rgb
* @param channel - individual channel to set, for example if model = hsl, chanel = h | s | l
* @param value - new value for the channel
*/
IroColor.prototype.setChannel = function setChannel (format, channel, value) {
var obj;
this[format] = Object.assign({}, this[format],
( obj = {}, obj[channel] = value, obj ));
};
/**
* @desc Reset color back to its initial value
*/
IroColor.prototype.reset = function reset () {
this.hsva = this.initialValue;
};
/**
* @desc make new Color instance with the same value as this one
*/
IroColor.prototype.clone = function clone () {
return new IroColor(this);
};
/**
* @desc remove color onChange
*/
IroColor.prototype.unbind = function unbind () {
this.onChange = undefined;
};
/**
* @desc Convert hsv object to rgb
* @param hsv - hsv color object
*/
IroColor.hsvToRgb = function hsvToRgb (hsv) {
var h = hsv.h / 60;
var s = hsv.s / 100;
var v = hsv.v / 100;
var i = floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var mod = i % 6;
var r = [v, q, p, p, t, v][mod];
var g = [t, v, v, q, p, p][mod];
var b = [p, p, t, v, v, q][mod];
return {
r: r * 255,
g: g * 255,
b: b * 255
};
};
/**
* @desc Convert rgb object to hsv
* @param rgb - rgb object
*/
IroColor.rgbToHsv = function rgbToHsv (rgb) {
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
var hue = 0;
var value = max;
var saturation = max === 0 ? 0 : delta / max;
switch (max) {
case min:
hue = 0; // achromatic
break;
case r:
hue = (g - b) / delta + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / delta + 2;
break;
case b:
hue = (r - g) / delta + 4;
break;
}
return {
h: hue * 60,
s: saturation * 100,
v: value * 100
};
};
/**
* @desc Convert hsv object to hsl
* @param hsv - hsv object
*/
IroColor.hsvToHsl = function hsvToHsl (hsv) {
var s = hsv.s / 100;
var v = hsv.v / 100;
var l = (2 - s) * v;
var divisor = l <= 1 ? l : 2 - l; // Avoid division by zero when lightness is close to zero
var saturation = divisor < 1e-9 ? 0 : s * v / divisor;
return {
h: hsv.h,
s: saturation * 100,
l: l * 50
};
};
/**
* @desc Convert hsl object to hsv
* @param hsl - hsl object
*/
IroColor.hslToHsv = function hslToHsv (hsl) {
var l = hsl.l * 2;
var s = hsl.s * (l <= 100 ? l : 200 - l) / 100; // Avoid division by zero when l + s is near 0
var saturation = l + s < 1e-9 ? 0 : 2 * s / (l + s);
return {
h: hsl.h,
s: saturation * 100,
v: (l + s) / 2
};
};
/**
* @desc Convert a kelvin temperature to an approx, RGB value
* @param kelvin - kelvin temperature
*/
IroColor.kelvinToRgb = function kelvinToRgb (kelvin) {
var temp = kelvin / 100;
var r, g, b;
if (temp < 66) {
r = 255;
g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g);
b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b);
} else {
r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r);
g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g);
b = 255;
}
return {
r: floor(r),
g: floor(g),
b: floor(b)
};
};
/**
* @desc Convert an RGB color to an approximate kelvin temperature
* @param kelvin - kelvin temperature
*/
IroColor.rgbToKelvin = function rgbToKelvin (rgb) {
var r = rgb.r;
var b = rgb.b;
var eps = 0.4;
var minTemp = KELVIN_MIN;
var maxTemp = KELVIN_MAX;
var temp;
while (maxTemp - minTemp > eps) {
temp = (maxTemp + minTemp) * 0.5;
var rgb$1 = IroColor.kelvinToRgb(temp);
if (rgb$1.b / rgb$1.r >= b / r) {
maxTemp = temp;
} else {
minTemp = temp;
}
}
return temp;
};
prototypeAccessors.hsv.get = function () {
// value is cloned to allow changes to be made to the values before passing them back
var value = this.$;
return {
h: value.h,
s: value.s,
v: value.v
};
};
prototypeAccessors.hsv.set = function (newValue) {
var oldValue = this.$;
newValue = Object.assign({}, oldValue,
newValue); // If this Color is being watched for changes we need to compare the new and old values to check the difference
// Otherwise we can just be lazy
if (this.onChange) {
// Compute changed values
var changes = {
h: false,
v: false,
s: false,
a: false
};
for (var key in oldValue) {
changes[key] = newValue[key] != oldValue[key];
}
this.$ = newValue; // If the value has changed, call hook callback
if (changes.h || changes.s || changes.v || changes.a) { this.onChange(this, changes); }
} else {
this.$ = newValue;
}
};
prototypeAccessors.hsva.get = function () {
return Object.assign({}, this.$);
};
prototypeAccessors.hsva.set = function (value) {
this.hsv = value;
};
prototypeAccessors.hue.get = function () {
return this.$.h;
};
prototypeAccessors.hue.set = function (value) {
this.hsv = {
h: value
};
};
prototypeAccessors.saturation.get = function () {
return this.$.s;
};
prototypeAccessors.saturation.set = function (value) {
this.hsv = {
s: value
};
};
prototypeAccessors.value.get = function () {
return this.$.v;
};
prototypeAccessors.value.set = function (value) {
this.hsv = {
v: value
};
};
prototypeAccessors.alpha.get = function () {
return this.$.a;
};
prototypeAccessors.alpha.set = function (value) {
this.hsv = Object.assign({}, this.hsv,
{a: value});
};
prototypeAccessors.kelvin.get = function () {
return IroColor.rgbToKelvin(this.rgb);
};
prototypeAccessors.kelvin.set = function (value) {
this.rgb = IroColor.kelvinToRgb(value);
};
prototypeAccessors.rgb.get = function () {
var ref = IroColor.hsvToRgb(this.$);
var r = ref.r;
var g = ref.g;
var b = ref.b;
return {
r: round(r),
g: round(g),
b: round(b)
};
};
prototypeAccessors.rgb.set = function (value) {
this.hsv = Object.assign({}, IroColor.rgbToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.rgba.get = function () {
return Object.assign({}, this.rgb,
{a: this.alpha});
};
prototypeAccessors.rgba.set = function (value) {
this.rgb = value;
};
prototypeAccessors.hsl.get = function () {
var ref = IroColor.hsvToHsl(this.$);
var h = ref.h;
var s = ref.s;
var l = ref.l;
return {
h: round(h),
s: round(s),
l: round(l)
};
};
prototypeAccessors.hsl.set = function (value) {
this.hsv = Object.assign({}, IroColor.hslToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.hsla.get = function () {
return Object.assign({}, this.hsl,
{a: this.alpha});
};
prototypeAccessors.hsla.set = function (value) {
this.hsl = value;
};
prototypeAccessors.rgbString.get = function () {
var rgb = this.rgb;
return ("rgb(" + (rgb.r) + ", " + (rgb.g) + ", " + (rgb.b) + ")");
};
prototypeAccessors.rgbString.set = function (value) {
var match;
var r,
g,
b,
a = 1;
if (match = REGEX_FUNCTIONAL_RGB.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
} else if (match = REGEX_FUNCTIONAL_RGBA.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
a = parseUnit(match[4], 1);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a
};
} else {
throw new Error('Invalid rgb string');
}
};
prototypeAccessors.rgbaString.get = function () {
var rgba = this.rgba;
return ("rgba(" + (rgba.r) + ", " + (rgba.g) + ", " + (rgba.b) + ", " + (rgba.a) + ")");
};
prototypeAccessors.rgbaString.set = function (value) {
this.rgbString = value;
};
prototypeAccessors.hexString.get = function () {
var rgb = this.rgb;
return ("#" + (intToHex(rgb.r)) + (intToHex(rgb.g)) + (intToHex(rgb.b)));
};
prototypeAccessors.hexString.set = function (value) {
var match;
var r,
g,
b,
a = 255;
if (match = REGEX_HEX_3.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
} else if (match = REGEX_HEX_4.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
a = parseHexInt(match[4]) * 17;
} else if (match = REGEX_HEX_6.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
} else if (match = REGEX_HEX_8.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
a = parseHexInt(match[4]);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a / 255
};
} else {
throw new Error('Invalid hex string');
}
};
prototypeAccessors.hex8String.get = function () {
var rgba = this.rgba;
return ("#" + (intToHex(rgba.r)) + (intToHex(rgba.g)) + (intToHex(rgba.b)) + (intToHex(floor(rgba.a * 255))));
};
prototypeAccessors.hex8String.set = function (value) {
this.hexString = value;
};
prototypeAccessors.hslString.get = function () {
var hsl = this.hsl;
return ("hsl(" + (hsl.h) + ", " + (hsl.s) + "%, " + (hsl.l) + "%)");
};
prototypeAccessors.hslString.set = function (value) {
var match;
var h,
s,
l,
a = 1;
if (match = REGEX_FUNCTIONAL_HSL.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
} else if (match = REGEX_FUNCTIONAL_HSLA.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
a = parseUnit(match[4], 1);
}
if (match) {
this.hsl = {
h: h,
s: s,
l: l,
a: a
};
} else {
throw new Error('Invalid hsl string');
}
};
prototypeAccessors.hslaString.get = function () {
var hsla = this.hsla;
return ("hsl(" + (hsla.h) + ", " + (hsla.s) + "%, " + (hsla.l) + "%, " + (hsla.a) + ")");
};
prototypeAccessors.hslaString.set = function (value) {
this.hslString = value;
};
Object.defineProperties( IroColor.prototype, prototypeAccessors );
var sliderDefaultOptions = {
sliderShape: 'bar',
sliderType: 'value',
minTemperature: 2200,
maxTemperature: 11000
};
/**
* @desc Get the CSS styles for the slider root
* @param props - slider props
*/
function getSliderStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the slider
* @param props - slider props
*/
function getSliderDimensions(props) {
var width = props.width;
var sliderSize = props.sliderSize;
var borderWidth = props.borderWidth;
var handleRadius = props.handleRadius;
var padding = props.padding;
var sliderShape = props.sliderShape;
var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined
sliderSize = sliderSize ? sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
if (sliderShape === 'circle') {
return {
handleStart: props.padding + props.handleRadius,
handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
width: width,
height: width,
cx: width / 2,
cy: width / 2,
radius: width / 2 - borderWidth / 2
};
} else {
return {
handleStart: sliderSize / 2,
handleRange: width - sliderSize,
radius: sliderSize / 2,
x: 0,
y: 0,
width: ishorizontal ? sliderSize : width,
height: ishorizontal ? width : sliderSize
};
}
}
/**
* @desc Get the current slider value for a given color, as a percentage
* @param props - slider props
* @param color
*/
function getCurrentSliderValue(props, color) {
var hsva = color.hsva;
switch (props.sliderType) {
case 'alpha':
return hsva.a * 100;
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage
return Math.max(0, Math.min(percent, 100));
case 'hue':
return hsva.h /= 3.6;
case 'saturation':
return hsva.s;
case 'value':
default:
return hsva.v;
}
}
/**
* @desc Get the current slider value from user input
* @param props - slider props
* @param x - global input x position
* @param y - global input y position
*/
function getSliderValueFromInput(props, x, y) {
var ref = getSliderDimensions(props);
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var handlePos;
if (props.layoutDirection === 'horizontal') {
handlePos = -1 * y + handleRange + handleStart;
} else {
handlePos = x - handleStart;
} // clamp handle position
handlePos = Math.max(Math.min(handlePos, handleRange), 0);
var percent = Math.round(100 / handleRange * handlePos);
switch (props.sliderType) {
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
return minTemperature + temperatureRange * (percent / 100);
case 'alpha':
return percent / 100;
case 'hue':
return percent * 3.6;
default:
return percent;
}
}
/**
* @desc Get the current handle position for a given color
* @param props - slider props
* @param color
*/
function getSliderHandlePosition(props, color) {
var ref = getSliderDimensions(props);
var width = ref.width;
var height = ref.height;
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var ishorizontal = props.layoutDirection === 'horizontal';
var sliderValue = getCurrentSliderValue(props, color);
var midPoint = ishorizontal ? width / 2 : height / 2;
var handlePos = handleStart + sliderValue / 100 * handleRange;
if (ishorizontal) {
handlePos = -1 * handlePos + handleRange + handleStart * 2;
}
return {
x: ishorizontal ? midPoint : handlePos,
y: ishorizontal ? handlePos : midPoint
};
}
/**
* @desc Get the gradient stops for a slider
* @param props - slider props
* @param color
*/
function getSliderGradient(props, color) {
var hsv = color.hsv;
switch (props.sliderType) {
case 'alpha':
var rgb = color.rgb;
return [[0, ("rgba(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ",0)")], [100, ("rgb(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ")")]];
case 'kelvin':
var stops = [];
var min = props.minTemperature;
var max = props.maxTemperature;
var numStops = 8;
var range = max - min;
for (var kelvin = min, stop = 0; kelvin < max; kelvin += range / numStops, stop += 1) {
var ref = IroColor.kelvinToRgb(kelvin);
var r = ref.r;
var g = ref.g;
var b = ref.b;
stops.push([100 / numStops * stop, ("rgb(" + r + "," + g + "," + b + ")")]);
}
return stops;
case 'hue':
return [[0, '#f00'], [16.666, '#ff0'], [33.333, '#0f0'], [50, '#0ff'], [66.666, '#00f'], [83.333, '#f0f'], [100, '#f00']];
case 'saturation':
var noSat = IroColor.hsvToHsl({
h: hsv.h,
s: 0,
v: hsv.v
});
var fullSat = IroColor.hsvToHsl({
h: hsv.h,
s: 100,
v: hsv.v
});
return [[0, ("hsl(" + (noSat.h) + "," + (noSat.s) + "%," + (noSat.l) + "%)")], [100, ("hsl(" + (fullSat.h) + "," + (fullSat.s) + "%," + (fullSat.l) + "%)")]];
case 'value':
default:
var hsl = IroColor.hsvToHsl({
h: hsv.h,
s: hsv.s,
v: 100
});
return [[0, '#000'], [100, ("hsl(" + (hsl.h) + "," + (hsl.s) + "%," + (hsl.l) + "%)")]];
}
}
/**
* @desc Get the gradient coords for a slider
* @param props - slider props
*/
function getSliderGradientCoords(props) {
var ishorizontal = props.layoutDirection === 'horizontal';
return {
x1: '0%',
y1: ishorizontal ? '100%' : '0%',
x2: ishorizontal ? '0%' : '100%',
y2: '0%'
};
}
/**
* @desc Get the point as the center of the wheel
* @param props - wheel props
*/
function getWheelDimensions(props) {
var rad = props.width / 2;
return {
width: props.width,
radius: rad - props.borderWidth,
cx: rad,
cy: rad
};
}
/**
* @desc Translate an angle according to wheelAngle and wheelDirection
* @param props - wheel props
* @param angle - input angle
*/
function translateWheelAngle(props, angle, invert) {
var wheelAngle = props.wheelAngle;
var wheelDirection = props.wheelDirection;
if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
angle = (invert ? 180 : 360) - (wheelAngle - angle);
} else {
angle = wheelAngle + angle;
} // javascript's modulo operator doesn't produce positive numbers with negative input
// https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
return (angle % 360 + 360) % 360;
}
/**
* @desc Get the current handle position for a given color
* @param props - wheel props
* @param color
*/
function getWheelHandlePosition(props, color) {
var hsv = color.hsv;
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
var handleAngle = (180 + translateWheelAngle(props, hsv.h, true)) * (Math.PI / 180);
var handleDist = hsv.s / 100 * handleRange;
var direction = props.wheelDirection === 'clockwise' ? -1 : 1;
return {
x: cx + handleDist * Math.cos(handleAngle) * direction,
y: cy + handleDist * Math.sin(handleAngle) * direction
};
}
/**
* @desc Get the current wheel value from user input
* @param props - wheel props
* @param x - global input x position
* @param y - global input y position
*/
function getWheelValueFromInput(props, x, y) {
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
x = cx - x;
y = cy - y; // Calculate the hue by converting the angle to radians
var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (180 / Math.PI)); // Find the point's distance from the center of the wheel
// This is used to show the saturation level
var handleDist = Math.min(Math.sqrt(x * x + y * y), handleRange);
return {
h: Math.round(hue),
s: Math.round(100 / handleRange * handleDist)
};
}
/**
* @desc Get the CSS styles for the box root element
* @param props - box props
*/
function getBoxStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the box
* @param props - box props
*/
function getBoxDimensions(props) {
var width = props.width;
var padding = props.padding;
var handleRadius = props.handleRadius;
return {
width: width,
height: width,
radius: padding + handleRadius
};
}
/**
* @desc Get the current box value from user input
* @param props - box props
* @param x - global input x position
* @param y - global input y position
*/
function getBoxValueFromInput(props, x, y) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
var percentX = (x - handleStart) / handleRangeX * 100;
var percentY = (y - handleStart) / handleRangeY * 100;
return {
s: Math.max(0, Math.min(percentX, 100)),
v: Math.max(0, Math.min(100 - percentY, 100))
};
}
/**
* @desc Get the current box handle position for a given color
* @param props - box props
* @param color
*/
function getBoxHandlePosition(props, color) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var hsv = color.hsv;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
return {
x: handleStart + hsv.s / 100 * handleRangeX,
y: handleStart + (handleRangeY - hsv.v / 100 * handleRangeY)
};
}
/**
* @desc Get the gradient stops for a box
* @param props - box props
* @param color
*/
function getBoxGradients(props, color) {
var hue = color.hue;
return [// saturation gradient
[[0, '#fff'], [100, ("hsl(" + hue + ",100%,50%)")]], // lightness gradient
[[0, 'rgba(0,0,0,0)'], [100, '#000']]];
}
// Keep track of html <base> elements for resolveSvgUrl
// getElementsByTagName returns a live HTMLCollection, which stays in sync with the DOM tree
// So it only needs to be called once
var BASE_ELEMENTS = document.getElementsByTagName('base');
/**
* @desc Resolve an SVG reference URL
* This is required to work around how Safari and iOS webviews handle gradient URLS under certain conditions
* If a page is using a client-side routing library which makes use of the HTML <base> tag,
* Safari won't be able to render SVG gradients properly (as they are referenced by URLs)
* More info on the problem:
* https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427
* https://github.com/jaames/iro.js/issues/18
* https://github.com/jaames/iro.js/issues/45
* https://github.com/jaames/iro.js/pull/89
* @props url - SVG reference URL
*/
function resolveSvgUrl(url) {
// Sniff useragent string to check if the user is running Safari
var ua = window.navigator.userAgent;
var isSafari = /^((?!chrome|android).)*safari/i.test(ua);
var isIos = /iPhone|iPod|iPad/i.test(ua);
var location = window.location;
return (isSafari || isIos) && BASE_ELEMENTS.length > 0 ? ((location.protocol) + "//" + (location.host) + (location.pathname) + (location.search) + url) : url;
}
/**
* @desc Get the path commands to draw an svg arc
* @props cx - arc center point x
* @props cy - arc center point y
* @props radius - arc radius
* @props startAngle - arc start angle
* @props endAngle - arc end angle
*/
function getSvgArcPath(cx, cy, radius, startAngle, endAngle) {
var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
startAngle *= Math.PI / 180;
endAngle *= Math.PI / 180;
var x1 = cx + radius * Math.cos(endAngle);
var y1 = cy + radius * Math.sin(endAngle);
var x2 = cx + radius * Math.cos(startAngle);
var y2 = cy + radius * Math.sin(startAngle);
return ("M " + x1 + " " + y1 + " A " + radius + " " + radius + " 0 " + largeArcFlag + " 0 " + x2 + " " + y2);
}
/**
* @desc Given a specifc (x, y) position, test if there's a handle there and return its index, else return null.
* This is used for components like the box and wheel which support multiple handles when multicolor is active
* @props x - point x position
* @props y - point y position
* @props handlePositions - array of {x, y} coords for each handle
*/
function getHandleAtPoint(props, x, y, handlePositions) {
for (var i = 0; i < handlePositions.length; i++) {
var dX = handlePositions[i].x - x;
var dY = handlePositions[i].y - y;
var dist = Math.sqrt(dX * dX + dY * dY);
if (dist < props.handleRadius) {
return i;
}
}
return null;
}
var iroColorPickerOptionDefaults = {
width: 300,
height: 300,
handleRadius: 8,
handleSvg: null,
handleProps: {
x: 0,
y: 0
},
color: '#fff',
colors: [],
borderColor: '#fff',
borderWidth: 0,
wheelLightness: true,
wheelAngle: 0,
wheelDirection: 'anticlockwise',
layoutDirection: 'vertical',
sliderSize: null,
sliderMargin: 12,
padding: 6
};
export { IroColor, sliderDefaultOptions, getSliderStyles, getSliderDimensions, getCurrentSliderValue, getSliderValueFromInput, getSliderHandlePosition, getSliderGradient, getSliderGradientCoords, getWheelDimensions, translateWheelAngle, getWheelHandlePosition, getWheelValueFromInput, getBoxStyles, getBoxDimensions, getBoxValueFromInput, getBoxHandlePosition, getBoxGradients, resolveSvgUrl, getSvgArcPath, getHandleAtPoint, iroColorPickerOptionDefaults };
//# sourceMappingURL=iro-core.es.js.map

1082

dist/iro-core.js

@@ -1,2 +0,1082 @@

var t="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",e="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",r="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",n=new RegExp("rgb"+e),i=new RegExp("rgba"+r),a=new RegExp("hsl"+e),s=new RegExp("hsla"+r),h=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),o=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),u=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),l=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),g=Math.log,c=Math.round,f=Math.floor;function v(t,e){var r=t.indexOf("%")>-1,n=parseFloat(t);return r?e/100*n:n}function d(t){return parseInt(t,16)}function b(t){return t.toString(16).padStart(2,"0")}var p=function(t,e){this.$={h:0,s:0,v:0,a:1},t&&this.set(t),this.onChange=e,this.initialValue=Object.assign({},this.$)},x={hsv:{configurable:!0},hsva:{configurable:!0},hue:{configurable:!0},saturation:{configurable:!0},value:{configurable:!0},alpha:{configurable:!0},kelvin:{configurable:!0},rgb:{configurable:!0},rgba:{configurable:!0},hsl:{configurable:!0},hsla:{configurable:!0},rgbString:{configurable:!0},rgbaString:{configurable:!0},hexString:{configurable:!0},hex8String:{configurable:!0},hslString:{configurable:!0},hslaString:{configurable:!0}};function w(t){var e=t.width,r=t.sliderSize,n=t.borderWidth,i=t.handleRadius,a=t.padding,s="horizontal"===t.layoutDirection;return r=r||2*a+2*i+2*n,"circle"===t.sliderShape?{handleStart:t.padding+t.handleRadius,handleRange:e-2*a-2*i-2*n,width:e,height:e,cx:e/2,cy:e/2,radius:e/2-n/2}:{handleStart:r/2,handleRange:e-r,radius:r/2,x:0,y:0,width:s?r:e,height:s?e:r}}function S(t,e){var r=e.hsva;switch(t.sliderType){case"alpha":return 100*r.a;case"kelvin":var n=t.minTemperature;return Math.max(0,Math.min((e.kelvin-n)/(t.maxTemperature-n)*100,100));case"hue":return r.h/=3.6;case"saturation":return r.s;case"value":default:return r.v}}function m(t){var e=t.width/2;return{width:t.width,radius:e-t.borderWidth,cx:e,cy:e}}function y(t,e,r){var n=t.wheelAngle,i=t.wheelDirection;return((e=!r&&"clockwise"===i||r&&"anticlockwise"===i?(r?180:360)-(n-e):n+e)%360+360)%360}function M(t){var e=t.width;return{width:e,height:e,radius:t.padding+t.handleRadius}}p.prototype.set=function(t){if("string"==typeof t)/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t)?this.hexString=t:/^rgba?/.test(t)?this.rgbString=t:/^hsla?/.test(t)&&(this.hslString=t);else{if("object"!=typeof t)throw new Error("Invalid color value");t instanceof p?this.hsv=t.hsv:"object"==typeof t&&"r"in t&&"g"in t&&"b"in t?this.rgb=t:"object"==typeof t&&"h"in t&&"s"in t&&"v"in t?this.hsv=t:"object"==typeof t&&"h"in t&&"s"in t&&"l"in t&&(this.hsl=t)}},p.prototype.setChannel=function(t,e,r){var n;this[t]=Object.assign({},this[t],((n={})[e]=r,n))},p.prototype.reset=function(){this.hsva=this.initialValue},p.prototype.clone=function(){return new p(this)},p.prototype.unbind=function(){this.onChange=void 0},p.hsvToRgb=function(t){var e=t.h/60,r=t.s/100,n=t.v/100,i=f(e),a=e-i,s=n*(1-r),h=n*(1-a*r),o=n*(1-(1-a)*r),u=i%6;return{r:255*[n,h,s,s,o,n][u],g:255*[o,n,n,h,s,s][u],b:255*[s,s,o,n,n,h][u]}},p.rgbToHsv=function(t){var e=t.r/255,r=t.g/255,n=t.b/255,i=Math.max(e,r,n),a=Math.min(e,r,n),s=i-a,h=0,o=i,u=0===i?0:s/i;switch(i){case a:h=0;break;case e:h=(r-n)/s+(r<n?6:0);break;case r:h=(n-e)/s+2;break;case n:h=(e-r)/s+4}return{h:60*h,s:100*u,v:100*o}},p.hsvToHsl=function(t){var e=t.s/100,r=t.v/100,n=(2-e)*r,i=n<=1?n:2-n;return{h:t.h,s:100*(i<1e-9?0:e*r/i),l:50*n}},p.hslToHsv=function(t){var e=2*t.l,r=t.s*(e<=100?e:200-e)/100;return{h:t.h,s:100*(e+r<1e-9?0:2*r/(e+r)),v:(e+r)/2}},p.kelvinToRgb=function(t){var e,r,n,i=t/100;return i<66?(e=255,r=-155.25485562709179-.44596950469579133*(r=i-2)+104.49216199393888*g(r),n=i<20?0:.8274096064007395*(n=i-10)-254.76935184120902+115.67994401066147*g(n)):(e=351.97690566805693+.114206453784165*(e=i-55)-40.25366309332127*g(e),r=325.4494125711974+.07943456536662342*(r=i-50)-28.0852963507957*g(r),n=255),{r:f(e),g:f(r),b:f(n)}},p.rgbToKelvin=function(t){for(var e,r=t.r,n=t.b,i=1e3,a=4e4;a-i>.4;){var s=p.kelvinToRgb(e=.5*(a+i));s.b/s.r>=n/r?a=e:i=e}return e},x.hsv.get=function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},x.hsv.set=function(t){var e=this.$;if(t=Object.assign({},e,t),this.onChange){var r={h:!1,v:!1,s:!1,a:!1};for(var n in e)r[n]=t[n]!=e[n];this.$=t,(r.h||r.s||r.v||r.a)&&this.onChange(this,r)}else this.$=t},x.hsva.get=function(){return Object.assign({},this.$)},x.hsva.set=function(t){this.hsv=t},x.hue.get=function(){return this.$.h},x.hue.set=function(t){this.hsv={h:t}},x.saturation.get=function(){return this.$.s},x.saturation.set=function(t){this.hsv={s:t}},x.value.get=function(){return this.$.v},x.value.set=function(t){this.hsv={v:t}},x.alpha.get=function(){return this.$.a},x.alpha.set=function(t){this.hsv=Object.assign({},this.hsv,{a:t})},x.kelvin.get=function(){return p.rgbToKelvin(this.rgb)},x.kelvin.set=function(t){this.rgb=p.kelvinToRgb(t)},x.rgb.get=function(){var t=p.hsvToRgb(this.$),e=t.g,r=t.b;return{r:c(t.r),g:c(e),b:c(r)}},x.rgb.set=function(t){this.hsv=Object.assign({},p.rgbToHsv(t),{a:void 0===t.a?1:t.a})},x.rgba.get=function(){return Object.assign({},this.rgb,{a:this.alpha})},x.rgba.set=function(t){this.rgb=t},x.hsl.get=function(){var t=p.hsvToHsl(this.$),e=t.s,r=t.l;return{h:c(t.h),s:c(e),l:c(r)}},x.hsl.set=function(t){this.hsv=Object.assign({},p.hslToHsv(t),{a:void 0===t.a?1:t.a})},x.hsla.get=function(){return Object.assign({},this.hsl,{a:this.alpha})},x.hsla.set=function(t){this.hsl=t},x.rgbString.get=function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},x.rgbString.set=function(t){var e,r,a,s,h=1;if((e=n.exec(t))?(r=v(e[1],255),a=v(e[2],255),s=v(e[3],255)):(e=i.exec(t))&&(r=v(e[1],255),a=v(e[2],255),s=v(e[3],255),h=v(e[4],1)),!e)throw new Error("Invalid rgb string");this.rgb={r:r,g:a,b:s,a:h}},x.rgbaString.get=function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},x.rgbaString.set=function(t){this.rgbString=t},x.hexString.get=function(){var t=this.rgb;return"#"+b(t.r)+b(t.g)+b(t.b)},x.hexString.set=function(t){var e,r,n,i,a=255;if((e=h.exec(t))?(r=17*d(e[1]),n=17*d(e[2]),i=17*d(e[3])):(e=o.exec(t))?(r=17*d(e[1]),n=17*d(e[2]),i=17*d(e[3]),a=17*d(e[4])):(e=u.exec(t))?(r=d(e[1]),n=d(e[2]),i=d(e[3])):(e=l.exec(t))&&(r=d(e[1]),n=d(e[2]),i=d(e[3]),a=d(e[4])),!e)throw new Error("Invalid hex string");this.rgb={r:r,g:n,b:i,a:a/255}},x.hex8String.get=function(){var t=this.rgba;return"#"+b(t.r)+b(t.g)+b(t.b)+b(f(255*t.a))},x.hex8String.set=function(t){this.hexString=t},x.hslString.get=function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},x.hslString.set=function(t){var e,r,n,i,h=1;if((e=a.exec(t))?(r=v(e[1],360),n=v(e[2],100),i=v(e[3],100)):(e=s.exec(t))&&(r=v(e[1],360),n=v(e[2],100),i=v(e[3],100),h=v(e[4],1)),!e)throw new Error("Invalid hsl string");this.hsl={h:r,s:n,l:i,a:h}},x.hslaString.get=function(){var t=this.hsla;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},x.hslaString.set=function(t){this.hslString=t},Object.defineProperties(p.prototype,x);var T=document.getElementsByTagName("base");exports.IroColor=p,exports.sliderDefaultOptions={sliderShape:"bar",sliderType:"value",minTemperature:2200,maxTemperature:11e3},exports.getSliderStyles=function(t){var e;return(e={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,e},exports.getSliderDimensions=w,exports.getCurrentSliderValue=S,exports.getSliderValueFromInput=function(t,e,r,n){var i,a=w(t),s=a.handleRange,h=a.handleStart;i="horizontal"===t.layoutDirection?-1*(r-n.top)+s+h:e-(n.left+h),i=Math.max(Math.min(i,s),0);var o=Math.round(100/s*i);switch(t.sliderType){case"kelvin":var u=t.minTemperature;return u+o/100*(t.maxTemperature-u);case"alpha":return o/100;case"hue":return 3.6*o;default:return o}},exports.getSliderHandlePosition=function(t,e){var r=w(t),n=r.handleRange,i=r.handleStart,a="horizontal"===t.layoutDirection,s=a?r.width/2:r.height/2,h=i+S(t,e)/100*n;return a&&(h=-1*h+n+2*i),{x:a?s:h,y:a?h:s}},exports.getSliderGradient=function(t,e){var r=e.hsv;switch(t.sliderType){case"alpha":var n=e.rgb;return[[0,"rgba("+n.r+","+n.g+","+n.b+",0)"],[100,"rgb("+n.r+","+n.g+","+n.b+")"]];case"kelvin":for(var i=[],a=t.minTemperature,s=t.maxTemperature,h=s-a,o=a,u=0;o<s;o+=h/8,u+=1){var l=p.kelvinToRgb(o);i.push([12.5*u,"rgb("+l.r+","+l.g+","+l.b+")"])}return i;case"hue":return[[0,"#f00"],[16.666,"#ff0"],[33.333,"#0f0"],[50,"#0ff"],[66.666,"#00f"],[83.333,"#f0f"],[100,"#f00"]];case"saturation":var g=p.hsvToHsl({h:r.h,s:0,v:r.v}),c=p.hsvToHsl({h:r.h,s:100,v:r.v});return[[0,"hsl("+g.h+","+g.s+"%,"+g.l+"%)"],[100,"hsl("+c.h+","+c.s+"%,"+c.l+"%)"]];case"value":default:var f=p.hsvToHsl({h:r.h,s:r.s,v:100});return[[0,"#000"],[100,"hsl("+f.h+","+f.s+"%,"+f.l+"%)"]]}},exports.getSliderGradientCoords=function(t){var e="horizontal"===t.layoutDirection;return{x1:"0%",y1:e?"100%":"0%",x2:e?"0%":"100%",y2:"0%"}},exports.getWheelDimensions=m,exports.translateWheelAngle=y,exports.getWheelHandlePosition=function(t,e){var r=e.hsv,n=m(t),i=n.cx,a=n.cy,s=t.width/2-t.padding-t.handleRadius-t.borderWidth,h=(180+y(t,r.h,!0))*(Math.PI/180),o=r.s/100*s,u="clockwise"===t.wheelDirection?-1:1;return{x:i+o*Math.cos(h)*u,y:a+o*Math.sin(h)*u}},exports.getWheelValueFromInput=function(t,e,r,n){var i=m(t),a=t.width/2-t.padding-t.handleRadius-t.borderWidth;e=i.cx-(e-n.left),r=i.cy-(r-n.top);var s=y(t,Math.atan2(-r,-e)*(180/Math.PI)),h=Math.min(Math.sqrt(e*e+r*r),a);return{h:Math.round(s),s:Math.round(100/a*h)}},exports.getBoxStyles=function(t){var e;return(e={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,e},exports.getBoxDimensions=M,exports.getBoxValueFromInput=function(t,e,r,n){var i=M(t),a=i.radius,s=(r-=n.top+a)/(i.height-2*a)*100;return{s:Math.max(0,Math.min((e-=n.left+a)/(i.width-2*a)*100,100)),v:Math.max(0,Math.min(100-s,100))}},exports.getBoxHandlePosition=function(t,e){var r=M(t),n=r.radius,i=e.hsv,a=r.height-2*n;return{x:n+i.s/100*(r.width-2*n),y:n+(a-i.v/100*a)}},exports.getBoxGradients=function(t,e){return[[[0,"#fff"],[100,"hsl("+e.hue+",100%,50%)"]],[[0,"rgba(0,0,0,0)"],[100,"#000"]]]},exports.resolveSvgUrl=function(t){var e=window.navigator.userAgent,r=/^((?!chrome|android).)*safari/i.test(e),n=/iPhone|iPod|iPad/i.test(e),i=window.location;return(r||n)&&T.length>0?i.protocol+"//"+i.host+i.pathname+i.search+t:t},exports.getSvgArcPath=function(t,e,r,n,i){var a=i-n<=180?0:1;return n*=Math.PI/180,i*=Math.PI/180,"M "+(t+r*Math.cos(i))+" "+(e+r*Math.sin(i))+" A "+r+" "+r+" 0 "+a+" 0 "+(t+r*Math.cos(n))+" "+(e+r*Math.sin(n))},exports.getHandleAtPoint=function(t,e,r,n){for(var i=0;i<n.length;i++){var a=n[i].x-e,s=n[i].y-r;if(Math.sqrt(a*a+s*s)<t.handleRadius)return i}return null},exports.iroColorPickerOptionDefaults={width:300,height:300,handleRadius:8,handleSvg:null,handleProps:{x:0,y:0},color:"#fff",colors:[],borderColor:"#fff",borderWidth:0,wheelLightness:!0,wheelAngle:0,wheelDirection:"anticlockwise",layoutDirection:"vertical",sliderSize:null,sliderMargin:12,padding:6};
// Some regular expressions for rgb() and hsl() Colors are borrowed from tinyColor
// https://github.com/bgrins/TinyColor
// Kelvin temperature math borrowed from Neil Barlett's implementation
// from https://github.com/neilbartlett/color-temperature
// https://www.w3.org/TR/css3-values/#integers
var CSS_INTEGER = '[-\\+]?\\d+%?'; // http://www.w3.org/TR/css3-values/#number-value
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome
var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')'; // Parse function params
// Parens and commas are optional, and this also allows for whitespace between numbers
var PERMISSIVE_MATCH_3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
var PERMISSIVE_MATCH_4 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; // Regex patterns for functional color strings
var REGEX_FUNCTIONAL_RGB = new RegExp('rgb' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_RGBA = new RegExp('rgba' + PERMISSIVE_MATCH_4);
var REGEX_FUNCTIONAL_HSL = new RegExp('hsl' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_HSLA = new RegExp('hsla' + PERMISSIVE_MATCH_4); // Color string parsing regex
var HEX_START = '^(?:#?|0x?)';
var HEX_INT_SINGLE = '([0-9a-fA-F]{1})';
var HEX_INT_DOUBLE = '([0-9a-fA-F]{2})';
var REGEX_HEX_3 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_4 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$');
var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds
var KELVIN_MIN = 1000;
var KELVIN_MAX = 40000; // Math shorthands
var log = Math.log;
var round = Math.round;
var floor = Math.floor;
/**
* @desc Parse a css unit string - either regular int or a percentage number
* @param str - css unit string
* @param max - max unit value, used for calculating percentages
*/
function parseUnit(str, max) {
var isPercentage = str.indexOf('%') > -1;
var num = parseFloat(str);
return isPercentage ? max / 100 * num : num;
}
/**
* @desc Parse hex str to an int
* @param str - hex string to parse
*/
function parseHexInt(str) {
return parseInt(str, 16);
}
/**
* @desc Convert nunber into to 2-digit hex
* @param int - number to convert
*/
function intToHex(int) {
return int.toString(16).padStart(2, '0');
}
var IroColor = function IroColor(value, onChange) {
// The default Color value
this.$ = {
h: 0,
s: 0,
v: 0,
a: 1
};
if (value) { this.set(value); } // The watch callback function for this Color will be stored here
this.onChange = onChange;
this.initialValue = Object.assign({}, this.$); // copy initial value
};
var prototypeAccessors = { hsv: { configurable: true },hsva: { configurable: true },hue: { configurable: true },saturation: { configurable: true },value: { configurable: true },alpha: { configurable: true },kelvin: { configurable: true },rgb: { configurable: true },rgba: { configurable: true },hsl: { configurable: true },hsla: { configurable: true },rgbString: { configurable: true },rgbaString: { configurable: true },hexString: { configurable: true },hex8String: { configurable: true },hslString: { configurable: true },hslaString: { configurable: true } };
/**
* @desc Set the Color from any valid value
* @param value - new color value
*/
IroColor.prototype.set = function set (value) {
if (typeof value === 'string') {
if (/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(value)) {
this.hexString = value;
} else if (/^rgba?/.test(value)) {
this.rgbString = value;
} else if (/^hsla?/.test(value)) {
this.hslString = value;
}
} else if (typeof value === 'object') {
if (value instanceof IroColor) {
this.hsv = value.hsv;
} else if (typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value) {
this.rgb = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'v' in value) {
this.hsv = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'l' in value) {
this.hsl = value;
}
} else {
throw new Error('Invalid color value');
}
};
/**
* @desc Shortcut to set a specific channel value
* @param format - hsv | hsl | rgb
* @param channel - individual channel to set, for example if model = hsl, chanel = h | s | l
* @param value - new value for the channel
*/
IroColor.prototype.setChannel = function setChannel (format, channel, value) {
var obj;
this[format] = Object.assign({}, this[format],
( obj = {}, obj[channel] = value, obj ));
};
/**
* @desc Reset color back to its initial value
*/
IroColor.prototype.reset = function reset () {
this.hsva = this.initialValue;
};
/**
* @desc make new Color instance with the same value as this one
*/
IroColor.prototype.clone = function clone () {
return new IroColor(this);
};
/**
* @desc remove color onChange
*/
IroColor.prototype.unbind = function unbind () {
this.onChange = undefined;
};
/**
* @desc Convert hsv object to rgb
* @param hsv - hsv color object
*/
IroColor.hsvToRgb = function hsvToRgb (hsv) {
var h = hsv.h / 60;
var s = hsv.s / 100;
var v = hsv.v / 100;
var i = floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var mod = i % 6;
var r = [v, q, p, p, t, v][mod];
var g = [t, v, v, q, p, p][mod];
var b = [p, p, t, v, v, q][mod];
return {
r: r * 255,
g: g * 255,
b: b * 255
};
};
/**
* @desc Convert rgb object to hsv
* @param rgb - rgb object
*/
IroColor.rgbToHsv = function rgbToHsv (rgb) {
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
var hue = 0;
var value = max;
var saturation = max === 0 ? 0 : delta / max;
switch (max) {
case min:
hue = 0; // achromatic
break;
case r:
hue = (g - b) / delta + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / delta + 2;
break;
case b:
hue = (r - g) / delta + 4;
break;
}
return {
h: hue * 60,
s: saturation * 100,
v: value * 100
};
};
/**
* @desc Convert hsv object to hsl
* @param hsv - hsv object
*/
IroColor.hsvToHsl = function hsvToHsl (hsv) {
var s = hsv.s / 100;
var v = hsv.v / 100;
var l = (2 - s) * v;
var divisor = l <= 1 ? l : 2 - l; // Avoid division by zero when lightness is close to zero
var saturation = divisor < 1e-9 ? 0 : s * v / divisor;
return {
h: hsv.h,
s: saturation * 100,
l: l * 50
};
};
/**
* @desc Convert hsl object to hsv
* @param hsl - hsl object
*/
IroColor.hslToHsv = function hslToHsv (hsl) {
var l = hsl.l * 2;
var s = hsl.s * (l <= 100 ? l : 200 - l) / 100; // Avoid division by zero when l + s is near 0
var saturation = l + s < 1e-9 ? 0 : 2 * s / (l + s);
return {
h: hsl.h,
s: saturation * 100,
v: (l + s) / 2
};
};
/**
* @desc Convert a kelvin temperature to an approx, RGB value
* @param kelvin - kelvin temperature
*/
IroColor.kelvinToRgb = function kelvinToRgb (kelvin) {
var temp = kelvin / 100;
var r, g, b;
if (temp < 66) {
r = 255;
g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g);
b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b);
} else {
r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r);
g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g);
b = 255;
}
return {
r: floor(r),
g: floor(g),
b: floor(b)
};
};
/**
* @desc Convert an RGB color to an approximate kelvin temperature
* @param kelvin - kelvin temperature
*/
IroColor.rgbToKelvin = function rgbToKelvin (rgb) {
var r = rgb.r;
var b = rgb.b;
var eps = 0.4;
var minTemp = KELVIN_MIN;
var maxTemp = KELVIN_MAX;
var temp;
while (maxTemp - minTemp > eps) {
temp = (maxTemp + minTemp) * 0.5;
var rgb$1 = IroColor.kelvinToRgb(temp);
if (rgb$1.b / rgb$1.r >= b / r) {
maxTemp = temp;
} else {
minTemp = temp;
}
}
return temp;
};
prototypeAccessors.hsv.get = function () {
// value is cloned to allow changes to be made to the values before passing them back
var value = this.$;
return {
h: value.h,
s: value.s,
v: value.v
};
};
prototypeAccessors.hsv.set = function (newValue) {
var oldValue = this.$;
newValue = Object.assign({}, oldValue,
newValue); // If this Color is being watched for changes we need to compare the new and old values to check the difference
// Otherwise we can just be lazy
if (this.onChange) {
// Compute changed values
var changes = {
h: false,
v: false,
s: false,
a: false
};
for (var key in oldValue) {
changes[key] = newValue[key] != oldValue[key];
}
this.$ = newValue; // If the value has changed, call hook callback
if (changes.h || changes.s || changes.v || changes.a) { this.onChange(this, changes); }
} else {
this.$ = newValue;
}
};
prototypeAccessors.hsva.get = function () {
return Object.assign({}, this.$);
};
prototypeAccessors.hsva.set = function (value) {
this.hsv = value;
};
prototypeAccessors.hue.get = function () {
return this.$.h;
};
prototypeAccessors.hue.set = function (value) {
this.hsv = {
h: value
};
};
prototypeAccessors.saturation.get = function () {
return this.$.s;
};
prototypeAccessors.saturation.set = function (value) {
this.hsv = {
s: value
};
};
prototypeAccessors.value.get = function () {
return this.$.v;
};
prototypeAccessors.value.set = function (value) {
this.hsv = {
v: value
};
};
prototypeAccessors.alpha.get = function () {
return this.$.a;
};
prototypeAccessors.alpha.set = function (value) {
this.hsv = Object.assign({}, this.hsv,
{a: value});
};
prototypeAccessors.kelvin.get = function () {
return IroColor.rgbToKelvin(this.rgb);
};
prototypeAccessors.kelvin.set = function (value) {
this.rgb = IroColor.kelvinToRgb(value);
};
prototypeAccessors.rgb.get = function () {
var ref = IroColor.hsvToRgb(this.$);
var r = ref.r;
var g = ref.g;
var b = ref.b;
return {
r: round(r),
g: round(g),
b: round(b)
};
};
prototypeAccessors.rgb.set = function (value) {
this.hsv = Object.assign({}, IroColor.rgbToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.rgba.get = function () {
return Object.assign({}, this.rgb,
{a: this.alpha});
};
prototypeAccessors.rgba.set = function (value) {
this.rgb = value;
};
prototypeAccessors.hsl.get = function () {
var ref = IroColor.hsvToHsl(this.$);
var h = ref.h;
var s = ref.s;
var l = ref.l;
return {
h: round(h),
s: round(s),
l: round(l)
};
};
prototypeAccessors.hsl.set = function (value) {
this.hsv = Object.assign({}, IroColor.hslToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.hsla.get = function () {
return Object.assign({}, this.hsl,
{a: this.alpha});
};
prototypeAccessors.hsla.set = function (value) {
this.hsl = value;
};
prototypeAccessors.rgbString.get = function () {
var rgb = this.rgb;
return ("rgb(" + (rgb.r) + ", " + (rgb.g) + ", " + (rgb.b) + ")");
};
prototypeAccessors.rgbString.set = function (value) {
var match;
var r,
g,
b,
a = 1;
if (match = REGEX_FUNCTIONAL_RGB.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
} else if (match = REGEX_FUNCTIONAL_RGBA.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
a = parseUnit(match[4], 1);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a
};
} else {
throw new Error('Invalid rgb string');
}
};
prototypeAccessors.rgbaString.get = function () {
var rgba = this.rgba;
return ("rgba(" + (rgba.r) + ", " + (rgba.g) + ", " + (rgba.b) + ", " + (rgba.a) + ")");
};
prototypeAccessors.rgbaString.set = function (value) {
this.rgbString = value;
};
prototypeAccessors.hexString.get = function () {
var rgb = this.rgb;
return ("#" + (intToHex(rgb.r)) + (intToHex(rgb.g)) + (intToHex(rgb.b)));
};
prototypeAccessors.hexString.set = function (value) {
var match;
var r,
g,
b,
a = 255;
if (match = REGEX_HEX_3.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
} else if (match = REGEX_HEX_4.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
a = parseHexInt(match[4]) * 17;
} else if (match = REGEX_HEX_6.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
} else if (match = REGEX_HEX_8.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
a = parseHexInt(match[4]);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a / 255
};
} else {
throw new Error('Invalid hex string');
}
};
prototypeAccessors.hex8String.get = function () {
var rgba = this.rgba;
return ("#" + (intToHex(rgba.r)) + (intToHex(rgba.g)) + (intToHex(rgba.b)) + (intToHex(floor(rgba.a * 255))));
};
prototypeAccessors.hex8String.set = function (value) {
this.hexString = value;
};
prototypeAccessors.hslString.get = function () {
var hsl = this.hsl;
return ("hsl(" + (hsl.h) + ", " + (hsl.s) + "%, " + (hsl.l) + "%)");
};
prototypeAccessors.hslString.set = function (value) {
var match;
var h,
s,
l,
a = 1;
if (match = REGEX_FUNCTIONAL_HSL.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
} else if (match = REGEX_FUNCTIONAL_HSLA.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
a = parseUnit(match[4], 1);
}
if (match) {
this.hsl = {
h: h,
s: s,
l: l,
a: a
};
} else {
throw new Error('Invalid hsl string');
}
};
prototypeAccessors.hslaString.get = function () {
var hsla = this.hsla;
return ("hsl(" + (hsla.h) + ", " + (hsla.s) + "%, " + (hsla.l) + "%, " + (hsla.a) + ")");
};
prototypeAccessors.hslaString.set = function (value) {
this.hslString = value;
};
Object.defineProperties( IroColor.prototype, prototypeAccessors );
var sliderDefaultOptions = {
sliderShape: 'bar',
sliderType: 'value',
minTemperature: 2200,
maxTemperature: 11000
};
/**
* @desc Get the CSS styles for the slider root
* @param props - slider props
*/
function getSliderStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the slider
* @param props - slider props
*/
function getSliderDimensions(props) {
var width = props.width;
var sliderSize = props.sliderSize;
var borderWidth = props.borderWidth;
var handleRadius = props.handleRadius;
var padding = props.padding;
var sliderShape = props.sliderShape;
var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined
sliderSize = sliderSize ? sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
if (sliderShape === 'circle') {
return {
handleStart: props.padding + props.handleRadius,
handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
width: width,
height: width,
cx: width / 2,
cy: width / 2,
radius: width / 2 - borderWidth / 2
};
} else {
return {
handleStart: sliderSize / 2,
handleRange: width - sliderSize,
radius: sliderSize / 2,
x: 0,
y: 0,
width: ishorizontal ? sliderSize : width,
height: ishorizontal ? width : sliderSize
};
}
}
/**
* @desc Get the current slider value for a given color, as a percentage
* @param props - slider props
* @param color
*/
function getCurrentSliderValue(props, color) {
var hsva = color.hsva;
switch (props.sliderType) {
case 'alpha':
return hsva.a * 100;
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage
return Math.max(0, Math.min(percent, 100));
case 'hue':
return hsva.h /= 3.6;
case 'saturation':
return hsva.s;
case 'value':
default:
return hsva.v;
}
}
/**
* @desc Get the current slider value from user input
* @param props - slider props
* @param x - global input x position
* @param y - global input y position
*/
function getSliderValueFromInput(props, x, y) {
var ref = getSliderDimensions(props);
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var handlePos;
if (props.layoutDirection === 'horizontal') {
handlePos = -1 * y + handleRange + handleStart;
} else {
handlePos = x - handleStart;
} // clamp handle position
handlePos = Math.max(Math.min(handlePos, handleRange), 0);
var percent = Math.round(100 / handleRange * handlePos);
switch (props.sliderType) {
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
return minTemperature + temperatureRange * (percent / 100);
case 'alpha':
return percent / 100;
case 'hue':
return percent * 3.6;
default:
return percent;
}
}
/**
* @desc Get the current handle position for a given color
* @param props - slider props
* @param color
*/
function getSliderHandlePosition(props, color) {
var ref = getSliderDimensions(props);
var width = ref.width;
var height = ref.height;
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var ishorizontal = props.layoutDirection === 'horizontal';
var sliderValue = getCurrentSliderValue(props, color);
var midPoint = ishorizontal ? width / 2 : height / 2;
var handlePos = handleStart + sliderValue / 100 * handleRange;
if (ishorizontal) {
handlePos = -1 * handlePos + handleRange + handleStart * 2;
}
return {
x: ishorizontal ? midPoint : handlePos,
y: ishorizontal ? handlePos : midPoint
};
}
/**
* @desc Get the gradient stops for a slider
* @param props - slider props
* @param color
*/
function getSliderGradient(props, color) {
var hsv = color.hsv;
switch (props.sliderType) {
case 'alpha':
var rgb = color.rgb;
return [[0, ("rgba(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ",0)")], [100, ("rgb(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ")")]];
case 'kelvin':
var stops = [];
var min = props.minTemperature;
var max = props.maxTemperature;
var numStops = 8;
var range = max - min;
for (var kelvin = min, stop = 0; kelvin < max; kelvin += range / numStops, stop += 1) {
var ref = IroColor.kelvinToRgb(kelvin);
var r = ref.r;
var g = ref.g;
var b = ref.b;
stops.push([100 / numStops * stop, ("rgb(" + r + "," + g + "," + b + ")")]);
}
return stops;
case 'hue':
return [[0, '#f00'], [16.666, '#ff0'], [33.333, '#0f0'], [50, '#0ff'], [66.666, '#00f'], [83.333, '#f0f'], [100, '#f00']];
case 'saturation':
var noSat = IroColor.hsvToHsl({
h: hsv.h,
s: 0,
v: hsv.v
});
var fullSat = IroColor.hsvToHsl({
h: hsv.h,
s: 100,
v: hsv.v
});
return [[0, ("hsl(" + (noSat.h) + "," + (noSat.s) + "%," + (noSat.l) + "%)")], [100, ("hsl(" + (fullSat.h) + "," + (fullSat.s) + "%," + (fullSat.l) + "%)")]];
case 'value':
default:
var hsl = IroColor.hsvToHsl({
h: hsv.h,
s: hsv.s,
v: 100
});
return [[0, '#000'], [100, ("hsl(" + (hsl.h) + "," + (hsl.s) + "%," + (hsl.l) + "%)")]];
}
}
/**
* @desc Get the gradient coords for a slider
* @param props - slider props
*/
function getSliderGradientCoords(props) {
var ishorizontal = props.layoutDirection === 'horizontal';
return {
x1: '0%',
y1: ishorizontal ? '100%' : '0%',
x2: ishorizontal ? '0%' : '100%',
y2: '0%'
};
}
/**
* @desc Get the point as the center of the wheel
* @param props - wheel props
*/
function getWheelDimensions(props) {
var rad = props.width / 2;
return {
width: props.width,
radius: rad - props.borderWidth,
cx: rad,
cy: rad
};
}
/**
* @desc Translate an angle according to wheelAngle and wheelDirection
* @param props - wheel props
* @param angle - input angle
*/
function translateWheelAngle(props, angle, invert) {
var wheelAngle = props.wheelAngle;
var wheelDirection = props.wheelDirection;
if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
angle = (invert ? 180 : 360) - (wheelAngle - angle);
} else {
angle = wheelAngle + angle;
} // javascript's modulo operator doesn't produce positive numbers with negative input
// https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
return (angle % 360 + 360) % 360;
}
/**
* @desc Get the current handle position for a given color
* @param props - wheel props
* @param color
*/
function getWheelHandlePosition(props, color) {
var hsv = color.hsv;
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
var handleAngle = (180 + translateWheelAngle(props, hsv.h, true)) * (Math.PI / 180);
var handleDist = hsv.s / 100 * handleRange;
var direction = props.wheelDirection === 'clockwise' ? -1 : 1;
return {
x: cx + handleDist * Math.cos(handleAngle) * direction,
y: cy + handleDist * Math.sin(handleAngle) * direction
};
}
/**
* @desc Get the current wheel value from user input
* @param props - wheel props
* @param x - global input x position
* @param y - global input y position
*/
function getWheelValueFromInput(props, x, y) {
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
x = cx - x;
y = cy - y; // Calculate the hue by converting the angle to radians
var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (180 / Math.PI)); // Find the point's distance from the center of the wheel
// This is used to show the saturation level
var handleDist = Math.min(Math.sqrt(x * x + y * y), handleRange);
return {
h: Math.round(hue),
s: Math.round(100 / handleRange * handleDist)
};
}
/**
* @desc Get the CSS styles for the box root element
* @param props - box props
*/
function getBoxStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the box
* @param props - box props
*/
function getBoxDimensions(props) {
var width = props.width;
var padding = props.padding;
var handleRadius = props.handleRadius;
return {
width: width,
height: width,
radius: padding + handleRadius
};
}
/**
* @desc Get the current box value from user input
* @param props - box props
* @param x - global input x position
* @param y - global input y position
*/
function getBoxValueFromInput(props, x, y) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
var percentX = (x - handleStart) / handleRangeX * 100;
var percentY = (y - handleStart) / handleRangeY * 100;
return {
s: Math.max(0, Math.min(percentX, 100)),
v: Math.max(0, Math.min(100 - percentY, 100))
};
}
/**
* @desc Get the current box handle position for a given color
* @param props - box props
* @param color
*/
function getBoxHandlePosition(props, color) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var hsv = color.hsv;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
return {
x: handleStart + hsv.s / 100 * handleRangeX,
y: handleStart + (handleRangeY - hsv.v / 100 * handleRangeY)
};
}
/**
* @desc Get the gradient stops for a box
* @param props - box props
* @param color
*/
function getBoxGradients(props, color) {
var hue = color.hue;
return [// saturation gradient
[[0, '#fff'], [100, ("hsl(" + hue + ",100%,50%)")]], // lightness gradient
[[0, 'rgba(0,0,0,0)'], [100, '#000']]];
}
// Keep track of html <base> elements for resolveSvgUrl
// getElementsByTagName returns a live HTMLCollection, which stays in sync with the DOM tree
// So it only needs to be called once
var BASE_ELEMENTS = document.getElementsByTagName('base');
/**
* @desc Resolve an SVG reference URL
* This is required to work around how Safari and iOS webviews handle gradient URLS under certain conditions
* If a page is using a client-side routing library which makes use of the HTML <base> tag,
* Safari won't be able to render SVG gradients properly (as they are referenced by URLs)
* More info on the problem:
* https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427
* https://github.com/jaames/iro.js/issues/18
* https://github.com/jaames/iro.js/issues/45
* https://github.com/jaames/iro.js/pull/89
* @props url - SVG reference URL
*/
function resolveSvgUrl(url) {
// Sniff useragent string to check if the user is running Safari
var ua = window.navigator.userAgent;
var isSafari = /^((?!chrome|android).)*safari/i.test(ua);
var isIos = /iPhone|iPod|iPad/i.test(ua);
var location = window.location;
return (isSafari || isIos) && BASE_ELEMENTS.length > 0 ? ((location.protocol) + "//" + (location.host) + (location.pathname) + (location.search) + url) : url;
}
/**
* @desc Get the path commands to draw an svg arc
* @props cx - arc center point x
* @props cy - arc center point y
* @props radius - arc radius
* @props startAngle - arc start angle
* @props endAngle - arc end angle
*/
function getSvgArcPath(cx, cy, radius, startAngle, endAngle) {
var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
startAngle *= Math.PI / 180;
endAngle *= Math.PI / 180;
var x1 = cx + radius * Math.cos(endAngle);
var y1 = cy + radius * Math.sin(endAngle);
var x2 = cx + radius * Math.cos(startAngle);
var y2 = cy + radius * Math.sin(startAngle);
return ("M " + x1 + " " + y1 + " A " + radius + " " + radius + " 0 " + largeArcFlag + " 0 " + x2 + " " + y2);
}
/**
* @desc Given a specifc (x, y) position, test if there's a handle there and return its index, else return null.
* This is used for components like the box and wheel which support multiple handles when multicolor is active
* @props x - point x position
* @props y - point y position
* @props handlePositions - array of {x, y} coords for each handle
*/
function getHandleAtPoint(props, x, y, handlePositions) {
for (var i = 0; i < handlePositions.length; i++) {
var dX = handlePositions[i].x - x;
var dY = handlePositions[i].y - y;
var dist = Math.sqrt(dX * dX + dY * dY);
if (dist < props.handleRadius) {
return i;
}
}
return null;
}
var iroColorPickerOptionDefaults = {
width: 300,
height: 300,
handleRadius: 8,
handleSvg: null,
handleProps: {
x: 0,
y: 0
},
color: '#fff',
colors: [],
borderColor: '#fff',
borderWidth: 0,
wheelLightness: true,
wheelAngle: 0,
wheelDirection: 'anticlockwise',
layoutDirection: 'vertical',
sliderSize: null,
sliderMargin: 12,
padding: 6
};
exports.IroColor = IroColor;
exports.sliderDefaultOptions = sliderDefaultOptions;
exports.getSliderStyles = getSliderStyles;
exports.getSliderDimensions = getSliderDimensions;
exports.getCurrentSliderValue = getCurrentSliderValue;
exports.getSliderValueFromInput = getSliderValueFromInput;
exports.getSliderHandlePosition = getSliderHandlePosition;
exports.getSliderGradient = getSliderGradient;
exports.getSliderGradientCoords = getSliderGradientCoords;
exports.getWheelDimensions = getWheelDimensions;
exports.translateWheelAngle = translateWheelAngle;
exports.getWheelHandlePosition = getWheelHandlePosition;
exports.getWheelValueFromInput = getWheelValueFromInput;
exports.getBoxStyles = getBoxStyles;
exports.getBoxDimensions = getBoxDimensions;
exports.getBoxValueFromInput = getBoxValueFromInput;
exports.getBoxHandlePosition = getBoxHandlePosition;
exports.getBoxGradients = getBoxGradients;
exports.resolveSvgUrl = resolveSvgUrl;
exports.getSvgArcPath = getSvgArcPath;
exports.getHandleAtPoint = getHandleAtPoint;
exports.iroColorPickerOptionDefaults = iroColorPickerOptionDefaults;
//# sourceMappingURL=iro-core.js.map

1089

dist/iro-core.umd.js

@@ -1,2 +0,1089 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.iroCore={})}(this,function(t){var e="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",r="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?",n="[\\s|\\(]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")[,|\\s]+("+e+")\\s*\\)?",i=new RegExp("rgb"+r),a=new RegExp("rgba"+n),s=new RegExp("hsl"+r),h=new RegExp("hsla"+n),o=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),u=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$"),l=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),g=new RegExp("^(?:#?|0x?)([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$"),c=Math.log,f=Math.round,v=Math.floor;function d(t,e){var r=t.indexOf("%")>-1,n=parseFloat(t);return r?e/100*n:n}function b(t){return parseInt(t,16)}function p(t){return t.toString(16).padStart(2,"0")}var x=function(t,e){this.$={h:0,s:0,v:0,a:1},t&&this.set(t),this.onChange=e,this.initialValue=Object.assign({},this.$)},w={hsv:{configurable:!0},hsva:{configurable:!0},hue:{configurable:!0},saturation:{configurable:!0},value:{configurable:!0},alpha:{configurable:!0},kelvin:{configurable:!0},rgb:{configurable:!0},rgba:{configurable:!0},hsl:{configurable:!0},hsla:{configurable:!0},rgbString:{configurable:!0},rgbaString:{configurable:!0},hexString:{configurable:!0},hex8String:{configurable:!0},hslString:{configurable:!0},hslaString:{configurable:!0}};function S(t){var e=t.width,r=t.sliderSize,n=t.borderWidth,i=t.handleRadius,a=t.padding,s="horizontal"===t.layoutDirection;return r=r||2*a+2*i+2*n,"circle"===t.sliderShape?{handleStart:t.padding+t.handleRadius,handleRange:e-2*a-2*i-2*n,width:e,height:e,cx:e/2,cy:e/2,radius:e/2-n/2}:{handleStart:r/2,handleRange:e-r,radius:r/2,x:0,y:0,width:s?r:e,height:s?e:r}}function m(t,e){var r=e.hsva;switch(t.sliderType){case"alpha":return 100*r.a;case"kelvin":var n=t.minTemperature;return Math.max(0,Math.min((e.kelvin-n)/(t.maxTemperature-n)*100,100));case"hue":return r.h/=3.6;case"saturation":return r.s;case"value":default:return r.v}}function y(t){var e=t.width/2;return{width:t.width,radius:e-t.borderWidth,cx:e,cy:e}}function M(t,e,r){var n=t.wheelAngle,i=t.wheelDirection;return((e=!r&&"clockwise"===i||r&&"anticlockwise"===i?(r?180:360)-(n-e):n+e)%360+360)%360}function T(t){var e=t.width;return{width:e,height:e,radius:t.padding+t.handleRadius}}x.prototype.set=function(t){if("string"==typeof t)/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t)?this.hexString=t:/^rgba?/.test(t)?this.rgbString=t:/^hsla?/.test(t)&&(this.hslString=t);else{if("object"!=typeof t)throw new Error("Invalid color value");t instanceof x?this.hsv=t.hsv:"object"==typeof t&&"r"in t&&"g"in t&&"b"in t?this.rgb=t:"object"==typeof t&&"h"in t&&"s"in t&&"v"in t?this.hsv=t:"object"==typeof t&&"h"in t&&"s"in t&&"l"in t&&(this.hsl=t)}},x.prototype.setChannel=function(t,e,r){var n;this[t]=Object.assign({},this[t],((n={})[e]=r,n))},x.prototype.reset=function(){this.hsva=this.initialValue},x.prototype.clone=function(){return new x(this)},x.prototype.unbind=function(){this.onChange=void 0},x.hsvToRgb=function(t){var e=t.h/60,r=t.s/100,n=t.v/100,i=v(e),a=e-i,s=n*(1-r),h=n*(1-a*r),o=n*(1-(1-a)*r),u=i%6;return{r:255*[n,h,s,s,o,n][u],g:255*[o,n,n,h,s,s][u],b:255*[s,s,o,n,n,h][u]}},x.rgbToHsv=function(t){var e=t.r/255,r=t.g/255,n=t.b/255,i=Math.max(e,r,n),a=Math.min(e,r,n),s=i-a,h=0,o=i,u=0===i?0:s/i;switch(i){case a:h=0;break;case e:h=(r-n)/s+(r<n?6:0);break;case r:h=(n-e)/s+2;break;case n:h=(e-r)/s+4}return{h:60*h,s:100*u,v:100*o}},x.hsvToHsl=function(t){var e=t.s/100,r=t.v/100,n=(2-e)*r,i=n<=1?n:2-n;return{h:t.h,s:100*(i<1e-9?0:e*r/i),l:50*n}},x.hslToHsv=function(t){var e=2*t.l,r=t.s*(e<=100?e:200-e)/100;return{h:t.h,s:100*(e+r<1e-9?0:2*r/(e+r)),v:(e+r)/2}},x.kelvinToRgb=function(t){var e,r,n,i=t/100;return i<66?(e=255,r=-155.25485562709179-.44596950469579133*(r=i-2)+104.49216199393888*c(r),n=i<20?0:.8274096064007395*(n=i-10)-254.76935184120902+115.67994401066147*c(n)):(e=351.97690566805693+.114206453784165*(e=i-55)-40.25366309332127*c(e),r=325.4494125711974+.07943456536662342*(r=i-50)-28.0852963507957*c(r),n=255),{r:v(e),g:v(r),b:v(n)}},x.rgbToKelvin=function(t){for(var e,r=t.r,n=t.b,i=1e3,a=4e4;a-i>.4;){var s=x.kelvinToRgb(e=.5*(a+i));s.b/s.r>=n/r?a=e:i=e}return e},w.hsv.get=function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},w.hsv.set=function(t){var e=this.$;if(t=Object.assign({},e,t),this.onChange){var r={h:!1,v:!1,s:!1,a:!1};for(var n in e)r[n]=t[n]!=e[n];this.$=t,(r.h||r.s||r.v||r.a)&&this.onChange(this,r)}else this.$=t},w.hsva.get=function(){return Object.assign({},this.$)},w.hsva.set=function(t){this.hsv=t},w.hue.get=function(){return this.$.h},w.hue.set=function(t){this.hsv={h:t}},w.saturation.get=function(){return this.$.s},w.saturation.set=function(t){this.hsv={s:t}},w.value.get=function(){return this.$.v},w.value.set=function(t){this.hsv={v:t}},w.alpha.get=function(){return this.$.a},w.alpha.set=function(t){this.hsv=Object.assign({},this.hsv,{a:t})},w.kelvin.get=function(){return x.rgbToKelvin(this.rgb)},w.kelvin.set=function(t){this.rgb=x.kelvinToRgb(t)},w.rgb.get=function(){var t=x.hsvToRgb(this.$),e=t.g,r=t.b;return{r:f(t.r),g:f(e),b:f(r)}},w.rgb.set=function(t){this.hsv=Object.assign({},x.rgbToHsv(t),{a:void 0===t.a?1:t.a})},w.rgba.get=function(){return Object.assign({},this.rgb,{a:this.alpha})},w.rgba.set=function(t){this.rgb=t},w.hsl.get=function(){var t=x.hsvToHsl(this.$),e=t.s,r=t.l;return{h:f(t.h),s:f(e),l:f(r)}},w.hsl.set=function(t){this.hsv=Object.assign({},x.hslToHsv(t),{a:void 0===t.a?1:t.a})},w.hsla.get=function(){return Object.assign({},this.hsl,{a:this.alpha})},w.hsla.set=function(t){this.hsl=t},w.rgbString.get=function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},w.rgbString.set=function(t){var e,r,n,s,h=1;if((e=i.exec(t))?(r=d(e[1],255),n=d(e[2],255),s=d(e[3],255)):(e=a.exec(t))&&(r=d(e[1],255),n=d(e[2],255),s=d(e[3],255),h=d(e[4],1)),!e)throw new Error("Invalid rgb string");this.rgb={r:r,g:n,b:s,a:h}},w.rgbaString.get=function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},w.rgbaString.set=function(t){this.rgbString=t},w.hexString.get=function(){var t=this.rgb;return"#"+p(t.r)+p(t.g)+p(t.b)},w.hexString.set=function(t){var e,r,n,i,a=255;if((e=o.exec(t))?(r=17*b(e[1]),n=17*b(e[2]),i=17*b(e[3])):(e=u.exec(t))?(r=17*b(e[1]),n=17*b(e[2]),i=17*b(e[3]),a=17*b(e[4])):(e=l.exec(t))?(r=b(e[1]),n=b(e[2]),i=b(e[3])):(e=g.exec(t))&&(r=b(e[1]),n=b(e[2]),i=b(e[3]),a=b(e[4])),!e)throw new Error("Invalid hex string");this.rgb={r:r,g:n,b:i,a:a/255}},w.hex8String.get=function(){var t=this.rgba;return"#"+p(t.r)+p(t.g)+p(t.b)+p(v(255*t.a))},w.hex8String.set=function(t){this.hexString=t},w.hslString.get=function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},w.hslString.set=function(t){var e,r,n,i,a=1;if((e=s.exec(t))?(r=d(e[1],360),n=d(e[2],100),i=d(e[3],100)):(e=h.exec(t))&&(r=d(e[1],360),n=d(e[2],100),i=d(e[3],100),a=d(e[4],1)),!e)throw new Error("Invalid hsl string");this.hsl={h:r,s:n,l:i,a:a}},w.hslaString.get=function(){var t=this.hsla;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},w.hslaString.set=function(t){this.hslString=t},Object.defineProperties(x.prototype,w);var R=document.getElementsByTagName("base");t.IroColor=x,t.sliderDefaultOptions={sliderShape:"bar",sliderType:"value",minTemperature:2200,maxTemperature:11e3},t.getSliderStyles=function(t){var e;return(e={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,e},t.getSliderDimensions=S,t.getCurrentSliderValue=m,t.getSliderValueFromInput=function(t,e,r,n){var i,a=S(t),s=a.handleRange,h=a.handleStart;i="horizontal"===t.layoutDirection?-1*(r-n.top)+s+h:e-(n.left+h),i=Math.max(Math.min(i,s),0);var o=Math.round(100/s*i);switch(t.sliderType){case"kelvin":var u=t.minTemperature;return u+o/100*(t.maxTemperature-u);case"alpha":return o/100;case"hue":return 3.6*o;default:return o}},t.getSliderHandlePosition=function(t,e){var r=S(t),n=r.handleRange,i=r.handleStart,a="horizontal"===t.layoutDirection,s=a?r.width/2:r.height/2,h=i+m(t,e)/100*n;return a&&(h=-1*h+n+2*i),{x:a?s:h,y:a?h:s}},t.getSliderGradient=function(t,e){var r=e.hsv;switch(t.sliderType){case"alpha":var n=e.rgb;return[[0,"rgba("+n.r+","+n.g+","+n.b+",0)"],[100,"rgb("+n.r+","+n.g+","+n.b+")"]];case"kelvin":for(var i=[],a=t.minTemperature,s=t.maxTemperature,h=s-a,o=a,u=0;o<s;o+=h/8,u+=1){var l=x.kelvinToRgb(o);i.push([12.5*u,"rgb("+l.r+","+l.g+","+l.b+")"])}return i;case"hue":return[[0,"#f00"],[16.666,"#ff0"],[33.333,"#0f0"],[50,"#0ff"],[66.666,"#00f"],[83.333,"#f0f"],[100,"#f00"]];case"saturation":var g=x.hsvToHsl({h:r.h,s:0,v:r.v}),c=x.hsvToHsl({h:r.h,s:100,v:r.v});return[[0,"hsl("+g.h+","+g.s+"%,"+g.l+"%)"],[100,"hsl("+c.h+","+c.s+"%,"+c.l+"%)"]];case"value":default:var f=x.hsvToHsl({h:r.h,s:r.s,v:100});return[[0,"#000"],[100,"hsl("+f.h+","+f.s+"%,"+f.l+"%)"]]}},t.getSliderGradientCoords=function(t){var e="horizontal"===t.layoutDirection;return{x1:"0%",y1:e?"100%":"0%",x2:e?"0%":"100%",y2:"0%"}},t.getWheelDimensions=y,t.translateWheelAngle=M,t.getWheelHandlePosition=function(t,e){var r=e.hsv,n=y(t),i=n.cx,a=n.cy,s=t.width/2-t.padding-t.handleRadius-t.borderWidth,h=(180+M(t,r.h,!0))*(Math.PI/180),o=r.s/100*s,u="clockwise"===t.wheelDirection?-1:1;return{x:i+o*Math.cos(h)*u,y:a+o*Math.sin(h)*u}},t.getWheelValueFromInput=function(t,e,r,n){var i=y(t),a=t.width/2-t.padding-t.handleRadius-t.borderWidth;e=i.cx-(e-n.left),r=i.cy-(r-n.top);var s=M(t,Math.atan2(-r,-e)*(180/Math.PI)),h=Math.min(Math.sqrt(e*e+r*r),a);return{h:Math.round(s),s:Math.round(100/a*h)}},t.getBoxStyles=function(t){var e;return(e={})["horizontal"===t.layoutDirection?"marginLeft":"marginTop"]=t.sliderMargin,e},t.getBoxDimensions=T,t.getBoxValueFromInput=function(t,e,r,n){var i=T(t),a=i.radius,s=(r-=n.top+a)/(i.height-2*a)*100;return{s:Math.max(0,Math.min((e-=n.left+a)/(i.width-2*a)*100,100)),v:Math.max(0,Math.min(100-s,100))}},t.getBoxHandlePosition=function(t,e){var r=T(t),n=r.radius,i=e.hsv,a=r.height-2*n;return{x:n+i.s/100*(r.width-2*n),y:n+(a-i.v/100*a)}},t.getBoxGradients=function(t,e){return[[[0,"#fff"],[100,"hsl("+e.hue+",100%,50%)"]],[[0,"rgba(0,0,0,0)"],[100,"#000"]]]},t.resolveSvgUrl=function(t){var e=window.navigator.userAgent,r=/^((?!chrome|android).)*safari/i.test(e),n=/iPhone|iPod|iPad/i.test(e),i=window.location;return(r||n)&&R.length>0?i.protocol+"//"+i.host+i.pathname+i.search+t:t},t.getSvgArcPath=function(t,e,r,n,i){var a=i-n<=180?0:1;return n*=Math.PI/180,i*=Math.PI/180,"M "+(t+r*Math.cos(i))+" "+(e+r*Math.sin(i))+" A "+r+" "+r+" 0 "+a+" 0 "+(t+r*Math.cos(n))+" "+(e+r*Math.sin(n))},t.getHandleAtPoint=function(t,e,r,n){for(var i=0;i<n.length;i++){var a=n[i].x-e,s=n[i].y-r;if(Math.sqrt(a*a+s*s)<t.handleRadius)return i}return null},t.iroColorPickerOptionDefaults={width:300,height:300,handleRadius:8,handleSvg:null,handleProps:{x:0,y:0},color:"#fff",colors:[],borderColor:"#fff",borderWidth:0,wheelLightness:!0,wheelAngle:0,wheelDirection:"anticlockwise",layoutDirection:"vertical",sliderSize:null,sliderMargin:12,padding:6}});
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.iroCore = {})));
}(this, (function (exports) {
// Some regular expressions for rgb() and hsl() Colors are borrowed from tinyColor
// https://github.com/bgrins/TinyColor
// Kelvin temperature math borrowed from Neil Barlett's implementation
// from https://github.com/neilbartlett/color-temperature
// https://www.w3.org/TR/css3-values/#integers
var CSS_INTEGER = '[-\\+]?\\d+%?'; // http://www.w3.org/TR/css3-values/#number-value
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome
var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')'; // Parse function params
// Parens and commas are optional, and this also allows for whitespace between numbers
var PERMISSIVE_MATCH_3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
var PERMISSIVE_MATCH_4 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; // Regex patterns for functional color strings
var REGEX_FUNCTIONAL_RGB = new RegExp('rgb' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_RGBA = new RegExp('rgba' + PERMISSIVE_MATCH_4);
var REGEX_FUNCTIONAL_HSL = new RegExp('hsl' + PERMISSIVE_MATCH_3);
var REGEX_FUNCTIONAL_HSLA = new RegExp('hsla' + PERMISSIVE_MATCH_4); // Color string parsing regex
var HEX_START = '^(?:#?|0x?)';
var HEX_INT_SINGLE = '([0-9a-fA-F]{1})';
var HEX_INT_DOUBLE = '([0-9a-fA-F]{2})';
var REGEX_HEX_3 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_4 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_INT_SINGLE + '$');
var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$');
var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds
var KELVIN_MIN = 1000;
var KELVIN_MAX = 40000; // Math shorthands
var log = Math.log;
var round = Math.round;
var floor = Math.floor;
/**
* @desc Parse a css unit string - either regular int or a percentage number
* @param str - css unit string
* @param max - max unit value, used for calculating percentages
*/
function parseUnit(str, max) {
var isPercentage = str.indexOf('%') > -1;
var num = parseFloat(str);
return isPercentage ? max / 100 * num : num;
}
/**
* @desc Parse hex str to an int
* @param str - hex string to parse
*/
function parseHexInt(str) {
return parseInt(str, 16);
}
/**
* @desc Convert nunber into to 2-digit hex
* @param int - number to convert
*/
function intToHex(int) {
return int.toString(16).padStart(2, '0');
}
var IroColor = function IroColor(value, onChange) {
// The default Color value
this.$ = {
h: 0,
s: 0,
v: 0,
a: 1
};
if (value) { this.set(value); } // The watch callback function for this Color will be stored here
this.onChange = onChange;
this.initialValue = Object.assign({}, this.$); // copy initial value
};
var prototypeAccessors = { hsv: { configurable: true },hsva: { configurable: true },hue: { configurable: true },saturation: { configurable: true },value: { configurable: true },alpha: { configurable: true },kelvin: { configurable: true },rgb: { configurable: true },rgba: { configurable: true },hsl: { configurable: true },hsla: { configurable: true },rgbString: { configurable: true },rgbaString: { configurable: true },hexString: { configurable: true },hex8String: { configurable: true },hslString: { configurable: true },hslaString: { configurable: true } };
/**
* @desc Set the Color from any valid value
* @param value - new color value
*/
IroColor.prototype.set = function set (value) {
if (typeof value === 'string') {
if (/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(value)) {
this.hexString = value;
} else if (/^rgba?/.test(value)) {
this.rgbString = value;
} else if (/^hsla?/.test(value)) {
this.hslString = value;
}
} else if (typeof value === 'object') {
if (value instanceof IroColor) {
this.hsv = value.hsv;
} else if (typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value) {
this.rgb = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'v' in value) {
this.hsv = value;
} else if (typeof value === 'object' && 'h' in value && 's' in value && 'l' in value) {
this.hsl = value;
}
} else {
throw new Error('Invalid color value');
}
};
/**
* @desc Shortcut to set a specific channel value
* @param format - hsv | hsl | rgb
* @param channel - individual channel to set, for example if model = hsl, chanel = h | s | l
* @param value - new value for the channel
*/
IroColor.prototype.setChannel = function setChannel (format, channel, value) {
var obj;
this[format] = Object.assign({}, this[format],
( obj = {}, obj[channel] = value, obj ));
};
/**
* @desc Reset color back to its initial value
*/
IroColor.prototype.reset = function reset () {
this.hsva = this.initialValue;
};
/**
* @desc make new Color instance with the same value as this one
*/
IroColor.prototype.clone = function clone () {
return new IroColor(this);
};
/**
* @desc remove color onChange
*/
IroColor.prototype.unbind = function unbind () {
this.onChange = undefined;
};
/**
* @desc Convert hsv object to rgb
* @param hsv - hsv color object
*/
IroColor.hsvToRgb = function hsvToRgb (hsv) {
var h = hsv.h / 60;
var s = hsv.s / 100;
var v = hsv.v / 100;
var i = floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var mod = i % 6;
var r = [v, q, p, p, t, v][mod];
var g = [t, v, v, q, p, p][mod];
var b = [p, p, t, v, v, q][mod];
return {
r: r * 255,
g: g * 255,
b: b * 255
};
};
/**
* @desc Convert rgb object to hsv
* @param rgb - rgb object
*/
IroColor.rgbToHsv = function rgbToHsv (rgb) {
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
var hue = 0;
var value = max;
var saturation = max === 0 ? 0 : delta / max;
switch (max) {
case min:
hue = 0; // achromatic
break;
case r:
hue = (g - b) / delta + (g < b ? 6 : 0);
break;
case g:
hue = (b - r) / delta + 2;
break;
case b:
hue = (r - g) / delta + 4;
break;
}
return {
h: hue * 60,
s: saturation * 100,
v: value * 100
};
};
/**
* @desc Convert hsv object to hsl
* @param hsv - hsv object
*/
IroColor.hsvToHsl = function hsvToHsl (hsv) {
var s = hsv.s / 100;
var v = hsv.v / 100;
var l = (2 - s) * v;
var divisor = l <= 1 ? l : 2 - l; // Avoid division by zero when lightness is close to zero
var saturation = divisor < 1e-9 ? 0 : s * v / divisor;
return {
h: hsv.h,
s: saturation * 100,
l: l * 50
};
};
/**
* @desc Convert hsl object to hsv
* @param hsl - hsl object
*/
IroColor.hslToHsv = function hslToHsv (hsl) {
var l = hsl.l * 2;
var s = hsl.s * (l <= 100 ? l : 200 - l) / 100; // Avoid division by zero when l + s is near 0
var saturation = l + s < 1e-9 ? 0 : 2 * s / (l + s);
return {
h: hsl.h,
s: saturation * 100,
v: (l + s) / 2
};
};
/**
* @desc Convert a kelvin temperature to an approx, RGB value
* @param kelvin - kelvin temperature
*/
IroColor.kelvinToRgb = function kelvinToRgb (kelvin) {
var temp = kelvin / 100;
var r, g, b;
if (temp < 66) {
r = 255;
g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g);
b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b);
} else {
r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r);
g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g);
b = 255;
}
return {
r: floor(r),
g: floor(g),
b: floor(b)
};
};
/**
* @desc Convert an RGB color to an approximate kelvin temperature
* @param kelvin - kelvin temperature
*/
IroColor.rgbToKelvin = function rgbToKelvin (rgb) {
var r = rgb.r;
var b = rgb.b;
var eps = 0.4;
var minTemp = KELVIN_MIN;
var maxTemp = KELVIN_MAX;
var temp;
while (maxTemp - minTemp > eps) {
temp = (maxTemp + minTemp) * 0.5;
var rgb$1 = IroColor.kelvinToRgb(temp);
if (rgb$1.b / rgb$1.r >= b / r) {
maxTemp = temp;
} else {
minTemp = temp;
}
}
return temp;
};
prototypeAccessors.hsv.get = function () {
// value is cloned to allow changes to be made to the values before passing them back
var value = this.$;
return {
h: value.h,
s: value.s,
v: value.v
};
};
prototypeAccessors.hsv.set = function (newValue) {
var oldValue = this.$;
newValue = Object.assign({}, oldValue,
newValue); // If this Color is being watched for changes we need to compare the new and old values to check the difference
// Otherwise we can just be lazy
if (this.onChange) {
// Compute changed values
var changes = {
h: false,
v: false,
s: false,
a: false
};
for (var key in oldValue) {
changes[key] = newValue[key] != oldValue[key];
}
this.$ = newValue; // If the value has changed, call hook callback
if (changes.h || changes.s || changes.v || changes.a) { this.onChange(this, changes); }
} else {
this.$ = newValue;
}
};
prototypeAccessors.hsva.get = function () {
return Object.assign({}, this.$);
};
prototypeAccessors.hsva.set = function (value) {
this.hsv = value;
};
prototypeAccessors.hue.get = function () {
return this.$.h;
};
prototypeAccessors.hue.set = function (value) {
this.hsv = {
h: value
};
};
prototypeAccessors.saturation.get = function () {
return this.$.s;
};
prototypeAccessors.saturation.set = function (value) {
this.hsv = {
s: value
};
};
prototypeAccessors.value.get = function () {
return this.$.v;
};
prototypeAccessors.value.set = function (value) {
this.hsv = {
v: value
};
};
prototypeAccessors.alpha.get = function () {
return this.$.a;
};
prototypeAccessors.alpha.set = function (value) {
this.hsv = Object.assign({}, this.hsv,
{a: value});
};
prototypeAccessors.kelvin.get = function () {
return IroColor.rgbToKelvin(this.rgb);
};
prototypeAccessors.kelvin.set = function (value) {
this.rgb = IroColor.kelvinToRgb(value);
};
prototypeAccessors.rgb.get = function () {
var ref = IroColor.hsvToRgb(this.$);
var r = ref.r;
var g = ref.g;
var b = ref.b;
return {
r: round(r),
g: round(g),
b: round(b)
};
};
prototypeAccessors.rgb.set = function (value) {
this.hsv = Object.assign({}, IroColor.rgbToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.rgba.get = function () {
return Object.assign({}, this.rgb,
{a: this.alpha});
};
prototypeAccessors.rgba.set = function (value) {
this.rgb = value;
};
prototypeAccessors.hsl.get = function () {
var ref = IroColor.hsvToHsl(this.$);
var h = ref.h;
var s = ref.s;
var l = ref.l;
return {
h: round(h),
s: round(s),
l: round(l)
};
};
prototypeAccessors.hsl.set = function (value) {
this.hsv = Object.assign({}, IroColor.hslToHsv(value),
{a: value.a === undefined ? 1 : value.a});
};
prototypeAccessors.hsla.get = function () {
return Object.assign({}, this.hsl,
{a: this.alpha});
};
prototypeAccessors.hsla.set = function (value) {
this.hsl = value;
};
prototypeAccessors.rgbString.get = function () {
var rgb = this.rgb;
return ("rgb(" + (rgb.r) + ", " + (rgb.g) + ", " + (rgb.b) + ")");
};
prototypeAccessors.rgbString.set = function (value) {
var match;
var r,
g,
b,
a = 1;
if (match = REGEX_FUNCTIONAL_RGB.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
} else if (match = REGEX_FUNCTIONAL_RGBA.exec(value)) {
r = parseUnit(match[1], 255);
g = parseUnit(match[2], 255);
b = parseUnit(match[3], 255);
a = parseUnit(match[4], 1);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a
};
} else {
throw new Error('Invalid rgb string');
}
};
prototypeAccessors.rgbaString.get = function () {
var rgba = this.rgba;
return ("rgba(" + (rgba.r) + ", " + (rgba.g) + ", " + (rgba.b) + ", " + (rgba.a) + ")");
};
prototypeAccessors.rgbaString.set = function (value) {
this.rgbString = value;
};
prototypeAccessors.hexString.get = function () {
var rgb = this.rgb;
return ("#" + (intToHex(rgb.r)) + (intToHex(rgb.g)) + (intToHex(rgb.b)));
};
prototypeAccessors.hexString.set = function (value) {
var match;
var r,
g,
b,
a = 255;
if (match = REGEX_HEX_3.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
} else if (match = REGEX_HEX_4.exec(value)) {
r = parseHexInt(match[1]) * 17;
g = parseHexInt(match[2]) * 17;
b = parseHexInt(match[3]) * 17;
a = parseHexInt(match[4]) * 17;
} else if (match = REGEX_HEX_6.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
} else if (match = REGEX_HEX_8.exec(value)) {
r = parseHexInt(match[1]);
g = parseHexInt(match[2]);
b = parseHexInt(match[3]);
a = parseHexInt(match[4]);
}
if (match) {
this.rgb = {
r: r,
g: g,
b: b,
a: a / 255
};
} else {
throw new Error('Invalid hex string');
}
};
prototypeAccessors.hex8String.get = function () {
var rgba = this.rgba;
return ("#" + (intToHex(rgba.r)) + (intToHex(rgba.g)) + (intToHex(rgba.b)) + (intToHex(floor(rgba.a * 255))));
};
prototypeAccessors.hex8String.set = function (value) {
this.hexString = value;
};
prototypeAccessors.hslString.get = function () {
var hsl = this.hsl;
return ("hsl(" + (hsl.h) + ", " + (hsl.s) + "%, " + (hsl.l) + "%)");
};
prototypeAccessors.hslString.set = function (value) {
var match;
var h,
s,
l,
a = 1;
if (match = REGEX_FUNCTIONAL_HSL.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
} else if (match = REGEX_FUNCTIONAL_HSLA.exec(value)) {
h = parseUnit(match[1], 360);
s = parseUnit(match[2], 100);
l = parseUnit(match[3], 100);
a = parseUnit(match[4], 1);
}
if (match) {
this.hsl = {
h: h,
s: s,
l: l,
a: a
};
} else {
throw new Error('Invalid hsl string');
}
};
prototypeAccessors.hslaString.get = function () {
var hsla = this.hsla;
return ("hsl(" + (hsla.h) + ", " + (hsla.s) + "%, " + (hsla.l) + "%, " + (hsla.a) + ")");
};
prototypeAccessors.hslaString.set = function (value) {
this.hslString = value;
};
Object.defineProperties( IroColor.prototype, prototypeAccessors );
var sliderDefaultOptions = {
sliderShape: 'bar',
sliderType: 'value',
minTemperature: 2200,
maxTemperature: 11000
};
/**
* @desc Get the CSS styles for the slider root
* @param props - slider props
*/
function getSliderStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the slider
* @param props - slider props
*/
function getSliderDimensions(props) {
var width = props.width;
var sliderSize = props.sliderSize;
var borderWidth = props.borderWidth;
var handleRadius = props.handleRadius;
var padding = props.padding;
var sliderShape = props.sliderShape;
var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined
sliderSize = sliderSize ? sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
if (sliderShape === 'circle') {
return {
handleStart: props.padding + props.handleRadius,
handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
width: width,
height: width,
cx: width / 2,
cy: width / 2,
radius: width / 2 - borderWidth / 2
};
} else {
return {
handleStart: sliderSize / 2,
handleRange: width - sliderSize,
radius: sliderSize / 2,
x: 0,
y: 0,
width: ishorizontal ? sliderSize : width,
height: ishorizontal ? width : sliderSize
};
}
}
/**
* @desc Get the current slider value for a given color, as a percentage
* @param props - slider props
* @param color
*/
function getCurrentSliderValue(props, color) {
var hsva = color.hsva;
switch (props.sliderType) {
case 'alpha':
return hsva.a * 100;
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage
return Math.max(0, Math.min(percent, 100));
case 'hue':
return hsva.h /= 3.6;
case 'saturation':
return hsva.s;
case 'value':
default:
return hsva.v;
}
}
/**
* @desc Get the current slider value from user input
* @param props - slider props
* @param x - global input x position
* @param y - global input y position
*/
function getSliderValueFromInput(props, x, y) {
var ref = getSliderDimensions(props);
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var handlePos;
if (props.layoutDirection === 'horizontal') {
handlePos = -1 * y + handleRange + handleStart;
} else {
handlePos = x - handleStart;
} // clamp handle position
handlePos = Math.max(Math.min(handlePos, handleRange), 0);
var percent = Math.round(100 / handleRange * handlePos);
switch (props.sliderType) {
case 'kelvin':
var minTemperature = props.minTemperature;
var maxTemperature = props.maxTemperature;
var temperatureRange = maxTemperature - minTemperature;
return minTemperature + temperatureRange * (percent / 100);
case 'alpha':
return percent / 100;
case 'hue':
return percent * 3.6;
default:
return percent;
}
}
/**
* @desc Get the current handle position for a given color
* @param props - slider props
* @param color
*/
function getSliderHandlePosition(props, color) {
var ref = getSliderDimensions(props);
var width = ref.width;
var height = ref.height;
var handleRange = ref.handleRange;
var handleStart = ref.handleStart;
var ishorizontal = props.layoutDirection === 'horizontal';
var sliderValue = getCurrentSliderValue(props, color);
var midPoint = ishorizontal ? width / 2 : height / 2;
var handlePos = handleStart + sliderValue / 100 * handleRange;
if (ishorizontal) {
handlePos = -1 * handlePos + handleRange + handleStart * 2;
}
return {
x: ishorizontal ? midPoint : handlePos,
y: ishorizontal ? handlePos : midPoint
};
}
/**
* @desc Get the gradient stops for a slider
* @param props - slider props
* @param color
*/
function getSliderGradient(props, color) {
var hsv = color.hsv;
switch (props.sliderType) {
case 'alpha':
var rgb = color.rgb;
return [[0, ("rgba(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ",0)")], [100, ("rgb(" + (rgb.r) + "," + (rgb.g) + "," + (rgb.b) + ")")]];
case 'kelvin':
var stops = [];
var min = props.minTemperature;
var max = props.maxTemperature;
var numStops = 8;
var range = max - min;
for (var kelvin = min, stop = 0; kelvin < max; kelvin += range / numStops, stop += 1) {
var ref = IroColor.kelvinToRgb(kelvin);
var r = ref.r;
var g = ref.g;
var b = ref.b;
stops.push([100 / numStops * stop, ("rgb(" + r + "," + g + "," + b + ")")]);
}
return stops;
case 'hue':
return [[0, '#f00'], [16.666, '#ff0'], [33.333, '#0f0'], [50, '#0ff'], [66.666, '#00f'], [83.333, '#f0f'], [100, '#f00']];
case 'saturation':
var noSat = IroColor.hsvToHsl({
h: hsv.h,
s: 0,
v: hsv.v
});
var fullSat = IroColor.hsvToHsl({
h: hsv.h,
s: 100,
v: hsv.v
});
return [[0, ("hsl(" + (noSat.h) + "," + (noSat.s) + "%," + (noSat.l) + "%)")], [100, ("hsl(" + (fullSat.h) + "," + (fullSat.s) + "%," + (fullSat.l) + "%)")]];
case 'value':
default:
var hsl = IroColor.hsvToHsl({
h: hsv.h,
s: hsv.s,
v: 100
});
return [[0, '#000'], [100, ("hsl(" + (hsl.h) + "," + (hsl.s) + "%," + (hsl.l) + "%)")]];
}
}
/**
* @desc Get the gradient coords for a slider
* @param props - slider props
*/
function getSliderGradientCoords(props) {
var ishorizontal = props.layoutDirection === 'horizontal';
return {
x1: '0%',
y1: ishorizontal ? '100%' : '0%',
x2: ishorizontal ? '0%' : '100%',
y2: '0%'
};
}
/**
* @desc Get the point as the center of the wheel
* @param props - wheel props
*/
function getWheelDimensions(props) {
var rad = props.width / 2;
return {
width: props.width,
radius: rad - props.borderWidth,
cx: rad,
cy: rad
};
}
/**
* @desc Translate an angle according to wheelAngle and wheelDirection
* @param props - wheel props
* @param angle - input angle
*/
function translateWheelAngle(props, angle, invert) {
var wheelAngle = props.wheelAngle;
var wheelDirection = props.wheelDirection;
if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
angle = (invert ? 180 : 360) - (wheelAngle - angle);
} else {
angle = wheelAngle + angle;
} // javascript's modulo operator doesn't produce positive numbers with negative input
// https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
return (angle % 360 + 360) % 360;
}
/**
* @desc Get the current handle position for a given color
* @param props - wheel props
* @param color
*/
function getWheelHandlePosition(props, color) {
var hsv = color.hsv;
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
var handleAngle = (180 + translateWheelAngle(props, hsv.h, true)) * (Math.PI / 180);
var handleDist = hsv.s / 100 * handleRange;
var direction = props.wheelDirection === 'clockwise' ? -1 : 1;
return {
x: cx + handleDist * Math.cos(handleAngle) * direction,
y: cy + handleDist * Math.sin(handleAngle) * direction
};
}
/**
* @desc Get the current wheel value from user input
* @param props - wheel props
* @param x - global input x position
* @param y - global input y position
*/
function getWheelValueFromInput(props, x, y) {
var ref = getWheelDimensions(props);
var cx = ref.cx;
var cy = ref.cy;
var handleRange = props.width / 2 - props.padding - props.handleRadius - props.borderWidth;
x = cx - x;
y = cy - y; // Calculate the hue by converting the angle to radians
var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (180 / Math.PI)); // Find the point's distance from the center of the wheel
// This is used to show the saturation level
var handleDist = Math.min(Math.sqrt(x * x + y * y), handleRange);
return {
h: Math.round(hue),
s: Math.round(100 / handleRange * handleDist)
};
}
/**
* @desc Get the CSS styles for the box root element
* @param props - box props
*/
function getBoxStyles(props) {
var obj;
return ( obj = {}, obj[props.layoutDirection === 'horizontal' ? 'marginLeft' : 'marginTop'] = props.sliderMargin, obj );
}
/**
* @desc Get the bounding dimensions of the box
* @param props - box props
*/
function getBoxDimensions(props) {
var width = props.width;
var padding = props.padding;
var handleRadius = props.handleRadius;
return {
width: width,
height: width,
radius: padding + handleRadius
};
}
/**
* @desc Get the current box value from user input
* @param props - box props
* @param x - global input x position
* @param y - global input y position
*/
function getBoxValueFromInput(props, x, y) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
var percentX = (x - handleStart) / handleRangeX * 100;
var percentY = (y - handleStart) / handleRangeY * 100;
return {
s: Math.max(0, Math.min(percentX, 100)),
v: Math.max(0, Math.min(100 - percentY, 100))
};
}
/**
* @desc Get the current box handle position for a given color
* @param props - box props
* @param color
*/
function getBoxHandlePosition(props, color) {
var ref = getBoxDimensions(props);
var width = ref.width;
var height = ref.height;
var radius = ref.radius;
var hsv = color.hsv;
var handleStart = radius;
var handleRangeX = width - radius * 2;
var handleRangeY = height - radius * 2;
return {
x: handleStart + hsv.s / 100 * handleRangeX,
y: handleStart + (handleRangeY - hsv.v / 100 * handleRangeY)
};
}
/**
* @desc Get the gradient stops for a box
* @param props - box props
* @param color
*/
function getBoxGradients(props, color) {
var hue = color.hue;
return [// saturation gradient
[[0, '#fff'], [100, ("hsl(" + hue + ",100%,50%)")]], // lightness gradient
[[0, 'rgba(0,0,0,0)'], [100, '#000']]];
}
// Keep track of html <base> elements for resolveSvgUrl
// getElementsByTagName returns a live HTMLCollection, which stays in sync with the DOM tree
// So it only needs to be called once
var BASE_ELEMENTS = document.getElementsByTagName('base');
/**
* @desc Resolve an SVG reference URL
* This is required to work around how Safari and iOS webviews handle gradient URLS under certain conditions
* If a page is using a client-side routing library which makes use of the HTML <base> tag,
* Safari won't be able to render SVG gradients properly (as they are referenced by URLs)
* More info on the problem:
* https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427
* https://github.com/jaames/iro.js/issues/18
* https://github.com/jaames/iro.js/issues/45
* https://github.com/jaames/iro.js/pull/89
* @props url - SVG reference URL
*/
function resolveSvgUrl(url) {
// Sniff useragent string to check if the user is running Safari
var ua = window.navigator.userAgent;
var isSafari = /^((?!chrome|android).)*safari/i.test(ua);
var isIos = /iPhone|iPod|iPad/i.test(ua);
var location = window.location;
return (isSafari || isIos) && BASE_ELEMENTS.length > 0 ? ((location.protocol) + "//" + (location.host) + (location.pathname) + (location.search) + url) : url;
}
/**
* @desc Get the path commands to draw an svg arc
* @props cx - arc center point x
* @props cy - arc center point y
* @props radius - arc radius
* @props startAngle - arc start angle
* @props endAngle - arc end angle
*/
function getSvgArcPath(cx, cy, radius, startAngle, endAngle) {
var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
startAngle *= Math.PI / 180;
endAngle *= Math.PI / 180;
var x1 = cx + radius * Math.cos(endAngle);
var y1 = cy + radius * Math.sin(endAngle);
var x2 = cx + radius * Math.cos(startAngle);
var y2 = cy + radius * Math.sin(startAngle);
return ("M " + x1 + " " + y1 + " A " + radius + " " + radius + " 0 " + largeArcFlag + " 0 " + x2 + " " + y2);
}
/**
* @desc Given a specifc (x, y) position, test if there's a handle there and return its index, else return null.
* This is used for components like the box and wheel which support multiple handles when multicolor is active
* @props x - point x position
* @props y - point y position
* @props handlePositions - array of {x, y} coords for each handle
*/
function getHandleAtPoint(props, x, y, handlePositions) {
for (var i = 0; i < handlePositions.length; i++) {
var dX = handlePositions[i].x - x;
var dY = handlePositions[i].y - y;
var dist = Math.sqrt(dX * dX + dY * dY);
if (dist < props.handleRadius) {
return i;
}
}
return null;
}
var iroColorPickerOptionDefaults = {
width: 300,
height: 300,
handleRadius: 8,
handleSvg: null,
handleProps: {
x: 0,
y: 0
},
color: '#fff',
colors: [],
borderColor: '#fff',
borderWidth: 0,
wheelLightness: true,
wheelAngle: 0,
wheelDirection: 'anticlockwise',
layoutDirection: 'vertical',
sliderSize: null,
sliderMargin: 12,
padding: 6
};
exports.IroColor = IroColor;
exports.sliderDefaultOptions = sliderDefaultOptions;
exports.getSliderStyles = getSliderStyles;
exports.getSliderDimensions = getSliderDimensions;
exports.getCurrentSliderValue = getCurrentSliderValue;
exports.getSliderValueFromInput = getSliderValueFromInput;
exports.getSliderHandlePosition = getSliderHandlePosition;
exports.getSliderGradient = getSliderGradient;
exports.getSliderGradientCoords = getSliderGradientCoords;
exports.getWheelDimensions = getWheelDimensions;
exports.translateWheelAngle = translateWheelAngle;
exports.getWheelHandlePosition = getWheelHandlePosition;
exports.getWheelValueFromInput = getWheelValueFromInput;
exports.getBoxStyles = getBoxStyles;
exports.getBoxDimensions = getBoxDimensions;
exports.getBoxValueFromInput = getBoxValueFromInput;
exports.getBoxHandlePosition = getBoxHandlePosition;
exports.getBoxGradients = getBoxGradients;
exports.resolveSvgUrl = resolveSvgUrl;
exports.getSvgArcPath = getSvgArcPath;
exports.getHandleAtPoint = getHandleAtPoint;
exports.iroColorPickerOptionDefaults = iroColorPickerOptionDefaults;
})));
//# sourceMappingURL=iro-core.umd.js.map

3

dist/slider.d.ts

@@ -61,5 +61,4 @@ import { IroColor } from './color';

* @param y - global input y position
* @param bounds - slider element bounding box
*/
export declare function getSliderValueFromInput(props: Partial<SliderOptions>, x: number, y: number, bounds: any): number;
export declare function getSliderValueFromInput(props: Partial<SliderOptions>, x: number, y: number): number;
/**

@@ -66,0 +65,0 @@ * @desc Get the current handle position for a given color

3

dist/wheel.d.ts

@@ -36,7 +36,6 @@ import { IroColorPickerOptions } from './colorPickerOptions';

* @param y - global input y position
* @param bounds - wheel element bounding box
*/
export declare function getWheelValueFromInput(props: Partial<WheelProps>, x: number, y: number, bounds: any): {
export declare function getWheelValueFromInput(props: Partial<WheelProps>, x: number, y: number): {
h: number;
s: number;
};

6

package.json
{
"name": "@irojs/iro-core",
"version": "0.0.6",
"version": "1.0.0",
"description": "Core functionality for iro.js",

@@ -18,3 +18,3 @@ "source": "src/index.ts",

"prepublishOnly": "npm run build",
"build": "microbundle",
"build": "microbundle --no-compress",
"dev": "microbundle watch",

@@ -44,3 +44,3 @@ "test": "jest"

},
"author": "James Daniel <mail@jamesdaniel.dev>",
"author": "James Daniel <irojs@jamesdaniel.dev>",
"license": "MPL-2.0",

@@ -47,0 +47,0 @@ "bugs": {

dist/svg.d.ts
dist/svg.test.d.ts
dist/iro-core.es.js.map

Sorry, the diff of this file is not supported yet

dist/iro-core.js.map

Sorry, the diff of this file is not supported yet

dist/iro-core.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc