@flourish/ui-styles 5.0.3 → 5.1.0

package/RELEASE_NOTES.md

@@ -1,3 +1,6 @@
+# 5.1.0
+* Dropdown background is transparent and dropdown border & carat take font colour
+
 # 5.0.3
 * Republish version with pnpm
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "private": false,
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
@@ -9,11 +9,11 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "d3-selection": "^1.4.0",
-    "@flourish/pocket-knife": "^1.3.0"
+    "@flourish/pocket-knife": "^1.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
     "@flourish/eslint-plugin-flourish": "^0.7.2",
     "@rollup/plugin-babel": "^6.0.4",
     "eslint": "^8.35.0",
@@ -26,7 +26,7 @@
     "url": "git://github.com/kiln/flourish-ui-styles.git"
   },
   "scripts": {
-    "lint": "eslint src",
+    "lint": "eslint .",
     "build": "rollup -c",
     "minify": "uglifyjs -m -o ui-styles.min.js ui-styles.js"
   }

package/src/dropdown-style/index.js

@@ -34,9 +34,19 @@ DropdownStyle.prototype._createStylesheet = function() {
 DropdownStyle.prototype.update = function() {
 	this._styles.clear();
 
-	var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
-	var text_color = this._state.font_color || this._layout.font_color || "#333333";
-	var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+	const background_color = this._state.background || "transparent";
+	const user_defined_text_color = this._state.font_color || this._layout.font_color;
+	const text_color = user_defined_text_color || "inherit";
+	let border_color;
+	if (this._state.border_color) {
+		border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+	}
+	else if (user_defined_text_color) {
+		border_color = hexToRgba(user_defined_text_color, this._state.border_transparency);
+	}
+	else {
+		border_color = "currentColor";
+	}
 
 	this._styles.select(this._selector + " .heading")
 		.style("margin-bottom", "0.4em");
@@ -107,5 +117,4 @@ DropdownStyle.prototype.update = function() {
 	this._stylesheet.innerHTML = this._styles.print();
 };
 
-
 export default DropdownStyle;

package/src/general-controls-style/index.js

@@ -65,5 +65,4 @@ GeneralControlsStyle.prototype.update = function() {
 	this._stylesheet.innerHTML = this._styles.print();
 };
 
-
 export default GeneralControlsStyle;

package/src/slider-style/index.js

@@ -97,5 +97,4 @@ SliderStyle.prototype.update = function() {
 	this._stylesheet.innerHTML = this._styles.print();
 };
 
-
 export default SliderStyle;

package/ui-styles.js

@@ -138,15 +138,15 @@
 	var brighter = 1 / darker;
 
 	var reI = "\\s*([+-]?\\d+)\\s*",
-	    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-	    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+	    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+	    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
 	    reHex = /^#([0-9a-f]{3,8})$/,
-	    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
-	    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
-	    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
-	    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
-	    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
-	    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+	    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
+	    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
+	    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
+	    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
+	    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
+	    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
 
 	var named = {
 	  aliceblue: 0xf0f8ff,
@@ -300,14 +300,15 @@
 	};
 
 	define(Color, color, {
-	  copy: function(channels) {
+	  copy(channels) {
 	    return Object.assign(new this.constructor, this, channels);
 	  },
-	  displayable: function() {
+	  displayable() {
 	    return this.rgb().displayable();
 	  },
 	  hex: color_formatHex, // Deprecated! Use color.formatHex.
 	  formatHex: color_formatHex,
+	  formatHex8: color_formatHex8,
 	  formatHsl: color_formatHsl,
 	  formatRgb: color_formatRgb,
 	  toString: color_formatRgb
@@ -317,6 +318,10 @@
 	  return this.rgb().formatHex();
 	}
 
+	function color_formatHex8() {
+	  return this.rgb().formatHex8();
+	}
+
 	function color_formatHsl() {
 	  return hslConvert(this).formatHsl();
 	}
@@ -372,18 +377,21 @@
 	}
 
 	define(Rgb, rgb, extend(Color, {
-	  brighter: function(k) {
+	  brighter(k) {
 	    k = k == null ? brighter : Math.pow(brighter, k);
 	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
 	  },
-	  darker: function(k) {
+	  darker(k) {
 	    k = k == null ? darker : Math.pow(darker, k);
 	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
 	  },
-	  rgb: function() {
+	  rgb() {
 	    return this;
 	  },
-	  displayable: function() {
+	  clamp() {
+	    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+	  },
+	  displayable() {
 	    return (-0.5 <= this.r && this.r < 255.5)
 	        && (-0.5 <= this.g && this.g < 255.5)
 	        && (-0.5 <= this.b && this.b < 255.5)
@@ -391,25 +399,34 @@
 	  },
 	  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
 	  formatHex: rgb_formatHex,
+	  formatHex8: rgb_formatHex8,
 	  formatRgb: rgb_formatRgb,
 	  toString: rgb_formatRgb
 	}));
 
 	function rgb_formatHex() {
-	  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+	  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+	}
+
+	function rgb_formatHex8() {
+	  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
 	}
 
 	function rgb_formatRgb() {
-	  var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-	  return (a === 1 ? "rgb(" : "rgba(")
-	      + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
-	      + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
-	      + Math.max(0, Math.min(255, Math.round(this.b) || 0))
-	      + (a === 1 ? ")" : ", " + a + ")");
+	  const a = clampa(this.opacity);
+	  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+	}
+
+	function clampa(opacity) {
+	  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+	}
+
+	function clampi(value) {
+	  return Math.max(0, Math.min(255, Math.round(value) || 0));
 	}
 
 	function hex(value) {
-	  value = Math.max(0, Math.min(255, Math.round(value) || 0));
+	  value = clampi(value);
 	  return (value < 16 ? "0" : "") + value.toString(16);
 	}
 
@@ -458,15 +475,15 @@
 	}
 
 	define(Hsl, hsl, extend(Color, {
-	  brighter: function(k) {
+	  brighter(k) {
 	    k = k == null ? brighter : Math.pow(brighter, k);
 	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
 	  },
-	  darker: function(k) {
+	  darker(k) {
 	    k = k == null ? darker : Math.pow(darker, k);
 	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
 	  },
-	  rgb: function() {
+	  rgb() {
 	    var h = this.h % 360 + (this.h < 0) * 360,
 	        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
 	        l = this.l,
@@ -479,21 +496,29 @@
 	      this.opacity
 	    );
 	  },
-	  displayable: function() {
+	  clamp() {
+	    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+	  },
+	  displayable() {
 	    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
 	        && (0 <= this.l && this.l <= 1)
 	        && (0 <= this.opacity && this.opacity <= 1);
 	  },
-	  formatHsl: function() {
-	    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-	    return (a === 1 ? "hsl(" : "hsla(")
-	        + (this.h || 0) + ", "
-	        + (this.s || 0) * 100 + "%, "
-	        + (this.l || 0) * 100 + "%"
-	        + (a === 1 ? ")" : ", " + a + ")");
+	  formatHsl() {
+	    const a = clampa(this.opacity);
+	    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
 	  }
 	}));
 
+	function clamph(value) {
+	  value = (value || 0) % 360;
+	  return value < 0 ? value + 360 : value;
+	}
+
+	function clampt(value) {
+	  return Math.max(0, Math.min(1, value || 0));
+	}
+
 	/* From FvD 13.37, CSS Color Module Level 3 */
 	function hsl2rgb(h, m1, m2) {
 	  return (h < 60 ? m1 + (m2 - m1) * h / 60
@@ -596,7 +621,7 @@
 	  each: proto.each
 	};
 
-	var canvas = document.createElement("canvas");
+	const canvas = document.createElement("canvas");
 	canvas.getContext("2d");
 
 	function getTextDirection() {
@@ -734,9 +759,19 @@
 	DropdownStyle.prototype.update = function() {
 		this._styles.clear();
 
-		var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
-		var text_color = this._state.font_color || this._layout.font_color || "#333333";
-		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+		const background_color = this._state.background || "transparent";
+		const user_defined_text_color = this._state.font_color || this._layout.font_color;
+		const text_color = user_defined_text_color || "inherit";
+		let border_color;
+		if (this._state.border_color) {
+			border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+		}
+		else if (user_defined_text_color) {
+			border_color = hexToRgba(user_defined_text_color, this._state.border_transparency);
+		}
+		else {
+			border_color = "currentColor";
+		}
 
 		this._styles.select(this._selector + " .heading")
 			.style("margin-bottom", "0.4em");

package/ui-styles.min.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports):typeof define==="function"&&define.amd?define(["exports"],e):(t=typeof globalThis!=="undefined"?globalThis:t||self,e(t["ui-styles"]={}))})(this,function(t){"use strict";function i(){this.declarations=[];return this}i.prototype.select=function(t){if(!t)return this;var e=new s(t);e.parent=this;this.addDeclaration(e);return e};i.prototype.addDeclaration=function(t){this.declarations.push(t);return this};i.prototype.print=function(){var e="";this.declarations.forEach(function(t){e+=t.selector+" {\n";t.styles.forEach(function(t){e+="\t"+t[0]+": "+t[1]+";\n"});e+="}\n\n"});return e};i.prototype.clear=function(){this.declarations=[];return this};function s(t){this.selector=t;this.styles=[];return this}s.prototype.style=function(t,e){var s=typeof value_=="function"?e():e;if(s!==""&&s!==null&&s!==undefined)this.styles.push([t,s]);return this};s.prototype.select=function(t){return this.parent.select(this.selector+" "+t)};var l=Object.freeze({font_size:1,font_weight:"bold",height:2});function r(t,e,s){this._state=t;for(var r in l){if(this._state[r]===undefined)this._state[r]=l[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}r.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-controls";document.head.appendChild(this._stylesheet)};r.prototype.update=function(){this._styles.clear();this._styles.select(this._selector+".hidden").style("display","none");this._styles.select(this._selector).style("vertical-align","middle").style("position","relative").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(".fl-controls-title").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("vertical-align","middle");this._styles.select(this._selector+".fl-control .button").style("height",this._state.height+"rem").style("padding","0 0.5em");this._styles.select(this._selector+"-dropdown select").style("height",this._state.height+"rem").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("padding",0+" "+this._state.height*.1+"rem");this._styles.select(this._selector+"-slider .slider-end-labels").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(this._selector+"-slider").style("height",this._state.height+"rem");this._stylesheet.innerHTML=this._styles.print()};function e(t,e,s){t.prototype=e.prototype=s;s.constructor=t}function o(t,e){var s=Object.create(t.prototype);for(var r in e)s[r]=e[r];return s}function h(){}var n=.7;var a=1/n;var c="\\s*([+-]?\\d+)\\s*",u="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",d="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",T=/^#([0-9a-f]{3,8})$/,L=new RegExp(`^rgb\\(${c},${c},${c}\\)$`),D=new RegExp(`^rgb\\(${d},${d},${d}\\)$`),A=new RegExp(`^rgba\\(${c},${c},${c},${u}\\)$`),B=new RegExp(`^rgba\\(${d},${d},${d},${u}\\)$`),F=new RegExp(`^hsl\\(${u},${d},${d}\\)$`),G=new RegExp(`^hsla\\(${u},${d},${d},${u}\\)$`);var y={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};e(h,p,{copy(t){return Object.assign(new this.constructor,this,t)},displayable(){return this.rgb().displayable()},hex:_,formatHex:_,formatHex8:I,formatHsl:P,formatRgb:f,toString:f});function _(){return this.rgb().formatHex()}function I(){return this.rgb().formatHex8()}function P(){return U(this).formatHsl()}function f(){return this.rgb().formatRgb()}function p(t){var e,s;t=(t+"").trim().toLowerCase();return(e=T.exec(t))?(s=e[1].length,e=parseInt(e[1],16),s===6?g(e):s===3?new m(e>>8&15|e>>4&240,e>>4&15|e&240,(e&15)<<4|e&15,1):s===8?b(e>>24&255,e>>16&255,e>>8&255,(e&255)/255):s===4?b(e>>12&15|e>>8&240,e>>8&15|e>>4&240,e>>4&15|e&240,((e&15)<<4|e&15)/255):null):(e=L.exec(t))?new m(e[1],e[2],e[3],1):(e=D.exec(t))?new m(e[1]*255/100,e[2]*255/100,e[3]*255/100,1):(e=A.exec(t))?b(e[1],e[2],e[3],e[4]):(e=B.exec(t))?b(e[1]*255/100,e[2]*255/100,e[3]*255/100,e[4]):(e=F.exec(t))?N(e[1],e[2]/100,e[3]/100,1):(e=G.exec(t))?N(e[1],e[2]/100,e[3]/100,e[4]):y.hasOwnProperty(t)?g(y[t]):t==="transparent"?new m(NaN,NaN,NaN,0):null}function g(t){return new m(t>>16&255,t>>8&255,t&255,1)}function b(t,e,s,r){if(r<=0)t=e=s=NaN;return new m(t,e,s,r)}function J(t){if(!(t instanceof h))t=p(t);if(!t)return new m;t=t.rgb();return new m(t.r,t.g,t.b,t.opacity)}function K(t,e,s,r){return arguments.length===1?J(t):new m(t,e,s,r==null?1:r)}function m(t,e,s,r){this.r=+t;this.g=+e;this.b=+s;this.opacity=+r}e(m,K,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new m(this.r*t,this.g*t,this.b*t,this.opacity)},darker(t){t=t==null?n:Math.pow(n,t);return new m(this.r*t,this.g*t,this.b*t,this.opacity)},rgb(){return this},clamp(){return new m(x(this.r),x(this.g),x(this.b),k(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&(-.5<=this.g&&this.g<255.5)&&(-.5<=this.b&&this.b<255.5)&&(0<=this.opacity&&this.opacity<=1)},hex:w,formatHex:w,formatHex8:Q,formatRgb:v,toString:v}));function w(){return`#${$(this.r)}${$(this.g)}${$(this.b)}`}function Q(){return`#${$(this.r)}${$(this.g)}${$(this.b)}${$((isNaN(this.opacity)?1:this.opacity)*255)}`}function v(){const t=k(this.opacity);return`${t===1?"rgb(":"rgba("}${x(this.r)}, ${x(this.g)}, ${x(this.b)}${t===1?")":`, ${t})`}`}function k(t){return isNaN(t)?1:Math.max(0,Math.min(1,t))}function x(t){return Math.max(0,Math.min(255,Math.round(t)||0))}function $(t){t=x(t);return(t<16?"0":"")+t.toString(16)}function N(t,e,s,r){if(r<=0)t=e=s=NaN;else if(s<=0||s>=1)t=e=NaN;else if(e<=0)t=NaN;return new z(t,e,s,r)}function U(t){if(t instanceof z)return new z(t.h,t.s,t.l,t.opacity);if(!(t instanceof h))t=p(t);if(!t)return new z;if(t instanceof z)return t;t=t.rgb();var e=t.r/255,s=t.g/255,r=t.b/255,i=Math.min(e,s,r),l=Math.max(e,s,r),o=NaN,n=l-i,a=(l+i)/2;if(n){if(e===l)o=(s-r)/n+(s<r)*6;else if(s===l)o=(r-e)/n+2;else o=(e-s)/n+4;n/=a<.5?l+i:2-l-i;o*=60}else{n=a>0&&a<1?0:o}return new z(o,n,a,t.opacity)}function V(t,e,s,r){return arguments.length===1?U(t):new z(t,e,s,r==null?1:r)}function z(t,e,s,r){this.h=+t;this.s=+e;this.l=+s;this.opacity=+r}e(z,V,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new z(this.h,this.s,this.l*t,this.opacity)},darker(t){t=t==null?n:Math.pow(n,t);return new z(this.h,this.s,this.l*t,this.opacity)},rgb(){var t=this.h%360+(this.h<0)*360,e=isNaN(t)||isNaN(this.s)?0:this.s,s=this.l,r=s+(s<.5?s:1-s)*e,i=2*s-r;return new m(M(t>=240?t-240:t+120,i,r),M(t,i,r),M(t<120?t+240:t-120,i,r),this.opacity)},clamp(){return new z(W(this.h),S(this.s),S(this.l),k(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&(0<=this.l&&this.l<=1)&&(0<=this.opacity&&this.opacity<=1)},formatHsl(){const t=k(this.opacity);return`${t===1?"hsl(":"hsla("}${W(this.h)}, ${S(this.s)*100}%, ${S(this.l)*100}%${t===1?")":`, ${t})`}`}}));function W(t){t=(t||0)%360;return t<0?t+360:t}function S(t){return Math.max(0,Math.min(1,t||0))}function M(t,e,s){return(t<60?e+(s-e)*t/60:t<180?s:t<240?e+(s-e)*(240-t)/60:e)*255}var E="$";function C(){}C.prototype=X.prototype={constructor:C,has:function(t){return E+t in this},get:function(t){return this[E+t]},set:function(t,e){this[E+t]=e;return this},remove:function(t){var e=E+t;return e in this&&delete this[e]},clear:function(){for(var t in this)if(t[0]===E)delete this[t]},keys:function(){var t=[];for(var e in this)if(e[0]===E)t.push(e.slice(1));return t},values:function(){var t=[];for(var e in this)if(e[0]===E)t.push(this[e]);return t},entries:function(){var t=[];for(var e in this)if(e[0]===E)t.push({key:e.slice(1),value:this[e]});return t},size:function(){var t=0;for(var e in this)if(e[0]===E)++t;return t},empty:function(){for(var t in this)if(t[0]===E)return false;return true},each:function(t){for(var e in this)if(e[0]===E)t(this[e],e.slice(1),this)}};function X(t,e){var s=new C;if(t instanceof C)t.each(function(t,e){s.set(e,t)});else if(Array.isArray(t)){var r=-1,i=t.length,l;if(e==null)while(++r<i)s.set(r,t[r]);else while(++r<i)s.set(e(l=t[r],r,t),l)}else if(t)for(var o in t)s.set(o,t[o]);return s}function Y(){}var H=X.prototype;Y.prototype={constructor:Y,has:H.has,add:function(t){t+="";this[E+t]=t;return this},remove:H.remove,clear:H.clear,values:H.keys,size:H.size,empty:H.empty,each:H.each};const Z=document.createElement("canvas");Z.getContext("2d");function tt(){return window.getComputedStyle(document.body).direction||"ltr"}function et(t,e){if(typeof t!="string")return false;var s=p(t);s.opacity=e!==undefined?e:1;return s}function q(t,e){var s=et(t,e);return s?s.toString():false}var st=Object.freeze({background:null,font_color:null,background_selected:"#333333",font_color_selected:"#ffffff",background_hover:null,font_color_hover:null,border_width:1,border_transparency:.25,border_color:null,border_radius:3});function R(t,e,s){this._state=t;for(var r in st){if(this._state[r]===undefined)this._state[r]=st[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}R.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-button";document.head.appendChild(this._stylesheet)};R.prototype.update=function(){this._styles.clear();var t=this._state.background||(this._layout.background_color_enabled?this._layout.background_color||"#ffffff":"#ffffff");var e=this._state.font_color||this._layout.font_color||"#333333";var s=q(this._state.border_color||e,this._state.border_transparency);var r=tt();this._styles.select(this._selector+".fl-control.hidden").style("display","none");this._styles.select(this._selector+".fl-control .button").style("overflow","hidden").style("white-space","nowrap").style("margin","0 2px 0 0 !important").style("background-color",t).style("color",e).style("border",this._state.border_width+"px solid "+s).style("border-radius",this._state.border_radius+"px");this._styles.select(this._selector+".fl-control .button:hover").style("background-color",this._state.background_hover||t).style("color",this._state.font_color_hover||e);this._styles.select(this._selector+".fl-control .button.selected").style("background-color",this._state.background_selected).style("color",this._state.font_color_selected);this._styles.select(this._selector+".grouped.fl-control .button").style("border-right","none").style("border-radius","0").style("margin","0");var i=r==="rtl";var l=i?":last-child":":first-child";var o=i?":first-child":":last-child";this._styles.select(this._selector+".grouped.fl-control .button"+l).style("border-radius",this._state.border_radius+"px 0 0 "+this._state.border_radius+"px");this._styles.select(this._selector+".grouped.fl-control .button"+o).style("border-radius","0 "+this._state.border_radius+"px "+this._state.border_radius+"px 0").style("border-right",this._state.border_width+"px solid "+s);this._styles.select(this._selector+".grouped.fl-control.fixed-width:not(.hidden)").style("width",this._state.grouped_width+"%");this._stylesheet.innerHTML=this._styles.print()};var rt=Object.freeze({background:null,font_color:null,border_style:"bottom",border_width:1,border_color:null,border_transparency:.25,border_radius:3});function j(t,e,s){this._state=t;for(var r in rt){if(this._state[r]===undefined)this._state[r]=rt[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}j.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-dropdown";document.head.appendChild(this._stylesheet)};j.prototype.update=function(){this._styles.clear();const t=this._state.background||"transparent";const e=this._state.font_color||this._layout.font_color;const s=e||"inherit";let r;if(this._state.border_color){r=q(this._state.border_color,this._state.border_transparency)}else if(e){r=q(e,this._state.border_transparency)}else{r="currentColor"}this._styles.select(this._selector+" .heading").style("margin-bottom","0.4em");this._styles.select(this._selector).style("pointer-events","all");this._styles.select(this._selector+" select").style("display","inline-block").style("cursor","pointer").style("overflow","hidden").style("white-space","nowrap").style("position","relative").style("font-family","inherit").style("background-color",t).style("color",s).style("border",this._state.border_style=="bottom"?this._state.border_width+"px solid transparent":this._state.border_width+"px solid "+r).style("border-bottom",this._state.border_style=="bottom"?this._state.border_width+"px solid "+r:null).style("border-radius",this._state.border_style=="bottom"?null:this._state.border_radius+"px");this._styles.select(this._selector+":after").style("right",this._state.border_style=="bottom"?null:this._state.border_width+5+"px").style("color",s);this._styles.select(this._selector+" .main .current").style("line-height","1em").style("height","100%").style("max-width","88%").style("display","inline-block").style("overflow","hidden").style("vertical-align","top");this._styles.select(this._selector+" .list").style("top","2px").style("min-width","100%").style("padding","2px").style("display","none").style("max-height","200px").style("overflow-y","auto").style("box-shadow","0 1px 4px rgba(0, 0, 0, .1)").style("margin-top","2px").select(".list-item").style("line-height","1em").style("cursor","pointer").style("font-weight","normal").style("color",s);this._styles.select(this._selector+".open .list").style("display","block").style("border",this._state.border_width+"px solid "+r).style("background-color",t).style("z-index","1").style("animation","dropdown-out 200ms");this._styles.select(this._selector+" .list-item:hover").style("opacity","0.6");this._styles.select(this._selector+" .list-item.selected, "+this._selector+" .list-item.selected:hover").style("opacity","1").style("cursor","default");if(this._state.border_style=="bottom"){this._styles.select(this._selector+" .main").style("padding-left",0).style("padding-right","0.1rem")}this._stylesheet.innerHTML=this._styles.print()};function it(t){return t*parseFloat(getComputedStyle(document.documentElement).fontSize)}var lt=Object.freeze({play_color:null,handle_color:null,font_color:null,track_color:null,handle_height:1,track_height:.2,margin:4.5,play_button:true});function O(t,e,s){this._state=t;for(var r in lt){if(this._state[r]===undefined)this._state[r]=lt[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}O.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-slider";document.head.appendChild(this._stylesheet)};O.prototype.update=function(){this._styles.clear();var t=this._state.track_color||"#dddddd";var e=this._state.font_color||this._layout.font_color||"currentColor";var s="currentColor";var r=this._state.handle_color||this._layout.font_color||"currentColor";var i=this._state.play_color||this._layout.font_color||"currentColor";var l=Math.round(it(this._state.handle_height));var o=it(this._state.track_height);this._styles.select(this._selector+" .fl-controls-slider").style("height",l*2+"px");this._styles.select(this._selector+" .slider-play").style("fill",i).style("width",l+"px").style("height",l+"px").style("display",this._state.play_button?null:"none");this._styles.select(this._selector+" .slider-label").style("padding-inline-start","0.3rem").style("box-sizing","content-box").style("color",e);this._styles.select(this._selector+" input[type=range]").style("-webkit-appearance","none").style("color",s).style("background-color","transparent");this._styles.select(this._selector+" input[type=range]::-webkit-slider-runnable-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-webkit-slider-thumb").style("-webkit-appearance","none").style("width",l+"px").style("height",l+"px").style("border-radius","100px").style("background",r).style("margin-top",-l/2+o/2+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-thumb").style("-webkit-appearance","none").style("width",l+"px").style("height",l+"px").style("border-radius","100px").style("border","none").style("background",r);this._stylesheet.innerHTML=this._styles.print()};function ot(t,e,s){return new r(t,e,s)}function nt(t,e,s){return new R(t,e,s)}function at(t,e,s){return new j(t,e,s)}function ht(t,e,s){return new O(t,e,s)}t.createButtonStyle=nt;t.createDropdownStyle=at;t.createGeneralControlsStyle=ot;t.createSliderStyle=ht});

package/.eslintrc.json

@@ -1,7 +0,0 @@
-{
-    "extends": "../../.eslintrc.cjs",
-    "ignorePatterns": [
-        "ui-styles.js",
-        "ui-styles.min.js"
-    ]
-}