x4js 1.6.4 → 2.0.1

package/lib/src/colorpicker.ts

@@ -1,1649 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file colorpicker.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-/**
- * ARGH this code is awfull
- */
-
-
-import { Container, Component, ContainerProps, ContainerEventMap } from './component'
-import { CheckBox } from './checkbox'
-import { Dialog, DialogBoxEventMap, DialogProps } from './dialog'
-import { EvChange, EventCallback } from './x4events'
-import { VLayout, HLayout } from './layout'
-import { Label } from './label'
-import { Color } from './color'
-import { isString, getMousePos, clamp, classNames } from './tools'
-import { TextEdit } from './textedit'
-import { Menu, MenuItem } from './menu'
-
-interface ColorPickerEventMap extends ContainerEventMap {
-	change: EvChange;
-}
-
-export interface ColorPickerProps extends ContainerProps<ColorPickerEventMap> {
-	color: Color;
-	hasAlpha?: boolean;
-}
-
-const pal_colors = {
-	blue: [0x0e5a8a, 0x106ba3, 0x137cbd, 0x2b95d6, 0x48aff0,],
-	green: [0x0a6640, 0x0d8050, 0x0f9960, 0x15b371, 0x3dcc91,],
-	orange: [0xa66321, 0xbf7326, 0xd9822b, 0xf29d49, 0xffb366,],
-	red: [0xa82a2a, 0xc23030, 0xdb3737, 0xf55656, 0xff7373,],
-	vermilion: [0x9e2b0e, 0xb83211, 0xd13913, 0xeb532d, 0xff6e4a,],
-	rose: [0xa82255, 0xc22762, 0xdb2c6f, 0xf5498b, 0xff66a1,],
-	violet: [0x5c255c, 0x752f75, 0x8f398f, 0xa854a8, 0xc274c2,],
-	indigo: [0x5642a6, 0x634dbf, 0x7157d9, 0x9179f2, 0xad99ff,],
-	cobalt: [0x1f4b99, 0x2458b3, 0x2965cc, 0x4580e6, 0x669eff,],
-	turquoise: [0x008075, 0x00998c, 0x00b3a4, 0x14ccbd, 0x2ee6d6,],
-	forest: [0x1d7324, 0x238c2c, 0x29a634, 0x43bf4d, 0x62d96b,],
-	lime: [0x728c23, 0x87a629, 0x9bbf30, 0xb6d94c, 0xd1f26d,],
-	gold: [0xa67908, 0xbf8c0a, 0xd99e0b, 0xf2b824, 0xffc940,],
-	sepia: [0x63411e, 0x7d5125, 0x96622d, 0xb07b46, 0xc99765,],
-	bw: [0x000000, 0x444444, 0x666666, 0xcccccc, 0xffffff,],
-};
-
-
-
-export class ColorPicker extends Container<ColorPickerProps, ColorPickerEventMap> {
-
-	private m_colorSel: Component;
-	private m_colorHue: Component;
-	private m_colorAlpha: Component;
-	private m_sample: Component;
-	private m_selMark: Component;
-	private m_hueMark: Component;
-	private m_alphaMark: Component;
-
-	private m_baseHSV: { h: number, s: number, v: number, a: number };
-	private m_baseColor: Color;
-	private m_transpCk: CheckBox;
-	private m_colorEdit: TextEdit;
-
-	private m_palmode: boolean;
-
-	static last_palmode = false;
-
-	constructor(props: ColorPickerProps) {
-		super(props);
-		this.m_palmode = ColorPicker.last_palmode;
-		this.setDomEvent('contextmenu', (e) => this._showCtx(e));
-	}
-
-	private _showCtx(e: UIEvent) {
-		const menu = new Menu({
-			items: [
-				new MenuItem({
-					text: 'Palette', checked: this.m_palmode, click: () => {
-						this.m_palmode = !this.m_palmode;
-						ColorPicker.last_palmode = this.m_palmode;
-						this.update();
-					}
-				})
-			]
-		})
-
-		let pt = getMousePos(e, true);
-		menu.displayAt(pt.x, pt.y);
-	}
-
-	render(props: ColorPickerProps) {
-
-		this.m_baseColor = props.color;
-		this.m_baseHSV = Color.toHSV(this.m_baseColor);
-
-		if (this.m_palmode) {
-
-			this.addClass("pal-mode");
-
-			let selector: VLayout = null;
-			let cur: Component = null;
-
-			let main_sel: Component[] = [];
-			let sub_sel: Component[] = [];
-
-			const ccolor = this.m_baseColor.value();
-
-			materialColors.forEach(mc => {
-				const color = mc.variations[4].hex;
-				
-				let selected = color === ccolor;
-				if( !selected ) {
-					selected = mc.variations.some( c => {
-						const cc = new Color(c.hex).value();
-						if( cc===ccolor ) {
-							return true;
-						}
-					});
-				}
-
-				let cls = classNames('clr-box xbox', { selected });
-				let el = new Component({ 
-					cls, 
-					style: { backgroundColor: new Color(color).toHex() }, 
-					data: { color, main: mc.variations } 
-				});
-
-				if( selected ) {
-					fillSubs( mc.variations );
-				}
-
-				main_sel.push(el);
-			});
-
-			function fillSubs( colors: Variation[] ) {
-				sub_sel = [];
-				colors.forEach(mc => {
-					let clr = new Color(mc.hex);
-					const selected = clr.value() == ccolor;
-
-					let cls = classNames('hclr-box xbox', { selected });
-					
-					let el = new Component({ 
-						cls, 
-						style: { backgroundColor: clr.toHex(), color: Color.contrastColor(clr).toHex() }, 
-						data: { color: clr.value() } ,
-						content: clr.toHex()
-					});
-
-					sub_sel.push(el);
-
-					if( selected ) {
-						cur = el;
-					}
-				});
-
-				if( selector ) {
-					selector.itemWithId('vsel').setContent( sub_sel );
-				}
-			}
-
-			selector = new VLayout({
-				content: [
-					new HLayout({
-						id: 'hsel',
-						content: main_sel
-					}),
-					new VLayout({
-						id: 'vsel',
-						flex: 1,
-						content: sub_sel
-					})
-				]
-			});
-
-
-			/*
-			let cur = null;
-			const buildCol = ( colors: number[] ) => {
-				
-				const ccolor = this.m_baseColor.value();
-				const els = colors.map( x => {
-					const selected = x==ccolor;
-
-					let cls = classNames( 'clr-box', { selected } );
-					let el = new Component( { cls, style: { backgroundColor: new Color(x).toHex() }, data: { color: x } } );
-
-					if( selected ) {
-						cur = el;
-					}
-					return el;
-				});
-				
-				return new VLayout( {
-					cls: 'vcol',
-					content: els
-				});
-			}
-			
-			let rows = new HLayout( {
-				cls: 'hcol',
-				content: [
-						buildCol( pal_colors.blue ),
-						buildCol( pal_colors.green ),
-						buildCol( pal_colors.orange ),
-						buildCol( pal_colors.red ),
-						buildCol( pal_colors.vermilion ),
-						buildCol( pal_colors.rose ),
-						buildCol( pal_colors.violet ),
-						buildCol( pal_colors.indigo ),
-						buildCol( pal_colors.cobalt ),
-						buildCol( pal_colors.turquoise ),
-						buildCol( pal_colors.forest ),
-						buildCol( pal_colors.lime ),
-						buildCol( pal_colors.gold ),
-						buildCol( pal_colors.sepia ),
-						buildCol( pal_colors.bw ),
-				]
-			});
-			*/
-
-
-			this.m_colorEdit = new TextEdit({
-				cls: 'hexv',
-				value: '',
-				attrs: {
-					spellcheck: false,
-				},
-				change: (ev) => {
-					const clr = new Color(ev.value);
-					if (clr) {
-						this.m_baseColor = clr;
-						this.m_baseHSV = Color.toHSV(clr);
-						this._updateColor(false);
-					}
-				}
-			});
-
-			this.m_transpCk = new CheckBox({
-				cls: 'transp',
-				text: 'transparent',
-				change: (ev) => {
-					this.m_baseHSV.a = ev.value ? 0 : 1;
-					this._updateColor();
-				}
-			});
-
-			this.setContent([selector, this.m_transpCk, this.m_colorEdit]);
-
-			// globally handle click
-
-			selector.setDomEvent('click', (ev) => {
-
-				if (cur) {
-					cur.removeClass('selected');
-					cur = null;
-				}
-
-				let cell = Component.getElement(ev.target as HTMLElement, 'xbox');
-				if (cell) {
-					const subs = cell.getData('main');
-					if( subs ) {
-						fillSubs( subs );
-					}
-					else {
-						const clr = new Color(cell.getData('color'));
-						this.m_baseColor = clr;
-						this.m_baseHSV = Color.toHSV(clr);
-						this._updateColor();
-
-						cur = cell;
-						cell.addClass('selected');
-					}
-				}
-
-			});
-		}
-		else {
-			this.removeClass("pal-mode");
-
-			this.m_selMark = new Component({ cls: 'marker' });
-			this.m_colorSel = new Component({
-				cls: 'sel',
-				content: [
-					new Component({ cls: '@fit light' }),
-					new Component({ cls: '@fit dark' }),
-					this.m_selMark,
-				]
-			});
-
-			this.m_hueMark = new Component({ cls: 'marker' });
-			this.m_colorHue = new Component({
-				cls: 'hue',
-				content: [
-					this.m_hueMark
-				]
-			});
-			this.m_sample = new Component({ cls: 'sample' });
-
-			if (props.hasAlpha) {
-				this.addClass('with-alpha');
-				this.m_alphaMark = new Component({ cls: 'marker' });
-				this.m_colorAlpha = new Component({
-					cls: 'alpha',
-					content: [
-						new Component({ cls: 'bk @fit', ref: 'color' }),
-						this.m_alphaMark
-					]
-				});
-			}
-			else {
-				this.removeClass('with-alpha');
-				this.m_transpCk = new CheckBox({
-					cls: 'transp',
-					text: 'transparent',
-					change: (ev) => {
-						this.m_baseHSV.a = ev.value ? 0 : 1;
-						this._updateColor();
-					}
-				});
-			}
-
-			this.m_colorEdit = new TextEdit({
-				cls: 'hexv',
-				value: '',
-				attrs: {
-					spellcheck: false,
-				},
-				change: (ev) => {
-					const clr = new Color(ev.value);
-					if (clr) {
-						this.m_baseColor = clr;
-						this.m_baseHSV = Color.toHSV(clr);
-						this._updateColor(false);
-					}
-				}
-			});
-
-			this.setContent([
-				this.m_colorSel,
-				this.m_colorHue,
-				this.m_colorAlpha,
-				this.m_transpCk,
-				this.m_colorEdit,
-				this.m_sample,
-			]);
-
-			this.m_colorSel.setDomEvent('mousedown', (ev: MouseEvent) => {
-				Component.setCapture(this, (e) => this._selChange(e));
-			});
-
-			this.m_colorHue.setDomEvent('mousedown', (ev: MouseEvent) => {
-				Component.setCapture(this, (e) => this._hueChange(e));
-			});
-
-			if (props.hasAlpha) {
-				this.m_colorAlpha.setDomEvent('mousedown', (ev: MouseEvent) => {
-					Component.setCapture(this, (e) => this._alphaChange(e));
-				});
-			}
-
-			this._updateColor();
-		}
-	}
-
-	set color(clr: Color) {
-		this.m_baseColor = clr;
-		this.m_baseHSV = Color.toHSV(this.m_baseColor);
-
-		this._updateColor();
-	}
-
-	get color() {
-		return this.m_baseColor;
-	}
-
-	private _selChange(ev: UIEvent) {
-		let pt = getMousePos(ev, true);
-		console.log(pt);
-		let rc = this.m_colorSel.getBoundingRect();
-
-		if (!this.m_props.hasAlpha) {
-			this.m_baseHSV.a = 1;
-		}
-
-		this.m_baseHSV.s = clamp((pt.x - rc.left) / rc.width, 0, 1);
-		this.m_baseHSV.v = 1 - clamp((pt.y - rc.top) / rc.height, 0, 1);
-		this._updateColor();
-
-		if (ev.type == 'mouseup' || ev.type == 'touchend') {
-			Component.releaseCapture();
-		}
-	}
-
-	private _hueChange(ev: UIEvent) {
-		let pt = getMousePos(ev, true);
-		let rc = this.m_colorHue.getBoundingRect();
-
-		this.m_baseHSV.h = clamp((pt.y - rc.top) / rc.height, 0, 1);
-		this._updateColor();
-
-		if (ev.type == 'mouseup' || ev.type == 'touchend') {
-			Component.releaseCapture();
-		}
-	}
-
-	private _alphaChange(ev: UIEvent) {
-		let pt = getMousePos(ev, true);
-		let rc = this.m_colorAlpha.getBoundingRect();
-
-		this.m_baseHSV.a = clamp((pt.x - rc.left) / rc.width, 0, 1);
-		this._updateColor();
-
-		if (ev.type == 'mouseup' || ev.type == 'touchend') {
-			Component.releaseCapture();
-		}
-	}
-
-	private _updateColor(edit = true) {
-
-		let color: Color;
-
-		if (!this.m_palmode) {
-
-			color = Color.fromHSV(this.m_baseHSV.h, 1, 1, 1);
-			this.m_colorSel.setStyleValue('backgroundColor', color.toString());
-
-			color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, 1);
-			this.m_sample.setStyleValue('backgroundColor', color.toString());
-
-			if (this.m_props.hasAlpha) {
-				let gradient = `linear-gradient(to right, rgba(0,0,0,0) 0%, ${color.toString()} 100%)`;
-				this.m_colorAlpha.itemWithRef<Component>('color').setStyleValue('backgroundImage', gradient);
-			}
-
-			this.m_selMark.setStyle({
-				left: (this.m_baseHSV.s * 100) + '%',
-				top: (100 - this.m_baseHSV.v * 100) + '%',
-			});
-
-			this.m_hueMark.setStyle({
-				top: (this.m_baseHSV.h * 100) + '%',
-			});
-
-			if (this.m_props.hasAlpha) {
-				this.m_alphaMark.setStyle({
-					left: (this.m_baseHSV.a * 100) + '%',
-				});
-			}
-			else {
-				this.m_transpCk.check = this.m_baseHSV.a == 0;
-			}
-		}
-		else {
-			this.m_transpCk.check = this.m_baseHSV.a == 0;
-		}
-
-		color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, this.m_baseHSV.a);
-		this.m_baseColor = color;
-
-		if (edit) {
-			this.m_colorEdit.value = color.alpha() == 1 ? color.toHex() : color.toString()	//color.toHex();
-		}
-
-		this._change();
-	}
-
-	private _change() {
-		this.emit('change', EvChange(this.m_baseColor));
-	}
-}
-
-// :: color dialog ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-interface ColorPickerBoxEventMap extends DialogBoxEventMap {
-	change: EvChange;
-}
-
-export interface ColorPickerBoxProps extends DialogProps<ColorPickerBoxEventMap> {
-	color: Color;
-	hasAlpha?: boolean;
-	cust_colors?: Color[];
-
-	change?: EventCallback<EvChange>;	// shortcut to { event: change: ... }
-}
-
-
-export class ColorPickerBox extends Dialog<ColorPickerBoxProps, ColorPickerBoxEventMap>
-{
-	private m_picker: ColorPicker;
-
-	constructor(props: ColorPickerBoxProps) {
-
-		props.icon = undefined;
-		props.buttons = undefined;
-
-		super(props);
-
-		this.mapPropEvents(props, 'change');
-
-		this.m_picker = new ColorPicker({
-			color: props.color,
-			hasAlpha: props.hasAlpha,
-			style: { padding: 8 },
-			width: 250,
-			height: 250,
-		});
-
-		let customs = this._makeCustoms(props.cust_colors);
-
-		this.form.updateContent([
-			new VLayout({
-				content: [
-					this.m_picker,
-					customs
-				]
-			})
-		], ['ok', 'cancel']);
-
-		this.on('btnClick', (ev) => {
-			if (ev.button == 'ok') {
-				this.emit('change', EvChange(this.m_picker.color));
-			}
-		});
-	}
-
-	private _makeCustoms(cc: Color[] ) {
-
-		let custom = null;
-
-		if (cc && cc.length > 0) {
-
-			let els = [];
-
-			for (let i = 0; i < cc.length; i += 8) {
-
-				let lne = [];
-
-				for (let j = 0; j < 8; j++) {
-
-					let idx = i + j,
-						clr = cc[idx];
-
-					lne.push(new Label({
-						cls: 'cust-cc',
-						text: '',
-						flex: 1,
-						style: {
-							backgroundColor: clr ? clr.toString() : 'transparent'
-						},
-						tooltip: clr ? clr.toString() : undefined,
-						dom_events: {
-							click: () => {
-								if (clr) {
-									this.m_picker.color = clr;
-									this.emit('change', EvChange(clr));
-									this.close();
-								}
-							}
-						}
-					}));
-				}
-
-				els.push(new HLayout({ cls: 'line', content: lne }));
-			}
-
-			custom = new VLayout({ cls: 'customs', content: els });
-		}
-
-		return custom;
-	}
-
-	set color(clr: Color) {
-		this.m_picker.color = clr;
-	}
-
-	get color() {
-		return this.m_picker.color;
-	}
-
-	/**
-	 * display a messagebox
-	 */
-
-	static show(props: string | ColorPickerBoxProps): ColorPickerBox {
-
-		let msg;
-
-		if (isString(props)) {
-			msg = new ColorPickerBox({ color: new Color(props) });
-		}
-		else {
-			msg = new ColorPickerBox(props);
-		}
-
-		msg.show();
-		return msg;
-	}
-}
-
-// :: PickerEditor ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-export interface ColorPickerEditorProps extends ColorPickerProps {
-	label?: string;
-	labelWidth?: number;
-	cust_colors?: Color[];
-	displayValue?: false,
-	change?: EventCallback<EvChange>;
-	name?: string;
-}
-
-export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {
-
-	constructor(props: ColorPickerEditorProps) {
-		super(props);
-
-		this.mapPropEvents(props, 'change');
-	}
-
-	render(props: ColorPickerEditorProps) {
-
-		let color = props.color;
-		let tcolor: string;
-
-		if (this._isTransp(color)) {
-			color = Color.NONE;
-			tcolor = 'black';
-		}
-		else {
-			tcolor = Color.contrastColor(color).toString();
-		}
-
-		this.setContent([
-			props.label ? new Label({
-				cls: 'label',
-				text: props.label,
-				flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
-				width: props.labelWidth >= 0 ? props.labelWidth : undefined,
-			}) : null,
-			new Component( {
-				flex: 1,
-				content: [
-					new Label({
-						cls: 'alpha @fit',
-						text: ''
-					}),
-					new Label({
-						cls: 'value @fit',
-						text: props.displayValue===false ? '' : color.toHex(),
-						style: {
-							backgroundColor: color.toString(),
-							color: tcolor
-						},
-						dom_events: {
-							click: () => this._showPicker()
-						}
-					})
-				],
-			} )
-		]);
-
-		if( props.displayValue===false ) {
-			this.setStyleValue( 'background-image', "url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg=='" );
-		}
-
-		this._setTabIndex(props.tabIndex);
-	}
-
-	set value(color: Color) {
-		this.m_props.color = color;
-		this.update();
-	}
-
-	get value() {
-		return this.m_props.color;
-	}
-
-	set custom_colors(v: Color[]) {
-		this.m_props.cust_colors = v;
-	}
-
-	private _showPicker() {
-		let dlg = new ColorPickerBox({
-			color: this.m_props.color,
-			cust_colors: this.m_props.cust_colors,
-			hasAlpha: this.m_props.hasAlpha,
-			events: {
-				change: (e) => {
-					this.m_props.color = e.value as Color;
-					this._change();
-					this.update();
-				}
-			}
-		});
-
-		let rc = this.getBoundingRect();
-		dlg.displayAt(rc.left, rc.bottom, 'tl');
-	}
-
-	private _change() {
-		this.emit('change', EvChange(this.m_props.color));
-	}
-
-	private _isTransp(color: Color) {
-		return !color.alpha();
-	}
-}
-
-
-// :: Material colors scheme ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-interface Variation {
-	weight: number;
-	hex: number;
-}
-
-interface Variations {
-	color: string;
-	variations: Variation[];
-};
-
-const materialColors: Variations[] = [
-	{
-		color: "Red",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFFEBEE
-			},
-			{
-				weight: 100,
-				hex: 0xFFCDD2
-			},
-			{
-				weight: 200,
-				hex: 0xEF9A9A
-			},
-			{
-				weight: 300,
-				hex: 0xE57373
-			},
-			{
-				weight: 400,
-				hex: 0xEF5350
-			},
-			{
-				weight: 500,
-				hex: 0xF44336
-			},
-			{
-				weight: 600,
-				hex: 0xE53935
-			},
-			{
-				weight: 700,
-				hex: 0xD32F2F
-			},
-			{
-				weight: 800,
-				hex: 0xC62828
-			},
-			{
-				weight: 900,
-				hex: 0xB71C1C
-			}
-		]
-	},
-	{
-		color: "Pink",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFCE4EC
-			},
-			{
-				weight: 100,
-				hex: 0xF8BBD0
-			},
-			{
-				weight: 200,
-				hex: 0xF48FB1
-			},
-			{
-				weight: 300,
-				hex: 0xF06292
-			},
-			{
-				weight: 400,
-				hex: 0xEC407A
-			},
-			{
-				weight: 500,
-				hex: 0xE91E63
-			},
-			{
-				weight: 600,
-				hex: 0xD81B60
-			},
-			{
-				weight: 700,
-				hex: 0xC2185B
-			},
-			{
-				weight: 800,
-				hex: 0xAD1457
-			},
-			{
-				weight: 900,
-				hex: 0x880E4F
-			}
-		]
-	},
-	{
-		color: "Purple",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xF3E5F5
-			},
-			{
-				weight: 100,
-				hex: 0xE1BEE7
-			},
-			{
-				weight: 200,
-				hex: 0xCE93D8
-			},
-			{
-				weight: 300,
-				hex: 0xBA68C8
-			},
-			{
-				weight: 400,
-				hex: 0xAB47BC
-			},
-			{
-				weight: 500,
-				hex: 0x9C27B0
-			},
-			{
-				weight: 600,
-				hex: 0x8E24AA
-			},
-			{
-				weight: 700,
-				hex: 0x7B1FA2
-			},
-			{
-				weight: 800,
-				hex: 0x6A1B9A
-			},
-			{
-				weight: 900,
-				hex: 0x4A148C
-			}
-		]
-	},
-	{
-		color: "Deep Purple",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xEDE7F6
-			},
-			{
-				weight: 100,
-				hex: 0xD1C4E9
-			},
-			{
-				weight: 200,
-				hex: 0xB39DDB
-			},
-			{
-				weight: 300,
-				hex: 0x9575CD
-			},
-			{
-				weight: 400,
-				hex: 0x7E57C2
-			},
-			{
-				weight: 500,
-				hex: 0x673AB7
-			},
-			{
-				weight: 600,
-				hex: 0x5E35B1
-			},
-			{
-				weight: 700,
-				hex: 0x512DA8
-			},
-			{
-				weight: 800,
-				hex: 0x4527A0
-			},
-			{
-				weight: 900,
-				hex: 0x311B92
-			}
-		]
-	},
-	{
-		color: "Indigo",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE8EAF6
-			},
-			{
-				weight: 100,
-				hex: 0xC5CAE9
-			},
-			{
-				weight: 200,
-				hex: 0x9FA8DA
-			},
-			{
-				weight: 300,
-				hex: 0x7986CB
-			},
-			{
-				weight: 400,
-				hex: 0x5C6BC0
-			},
-			{
-				weight: 500,
-				hex: 0x3F51B5
-			},
-			{
-				weight: 600,
-				hex: 0x3949AB
-			},
-			{
-				weight: 700,
-				hex: 0x303F9F
-			},
-			{
-				weight: 800,
-				hex: 0x283593
-			},
-			{
-				weight: 900,
-				hex: 0x1A237E
-			}
-		]
-	},
-	{
-		color: "Blue",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE3F2FD
-			},
-			{
-				weight: 100,
-				hex: 0xBBDEFB
-			},
-			{
-				weight: 200,
-				hex: 0x90CAF9
-			},
-			{
-				weight: 300,
-				hex: 0x64B5F6
-			},
-			{
-				weight: 400,
-				hex: 0x42A5F5
-			},
-			{
-				weight: 500,
-				hex: 0x2196F3
-			},
-			{
-				weight: 600,
-				hex: 0x1E88E5
-			},
-			{
-				weight: 700,
-				hex: 0x1976D2
-			},
-			{
-				weight: 800,
-				hex: 0x1565C0
-			},
-			{
-				weight: 900,
-				hex: 0x0D47A1
-			}
-		]
-	},
-	{
-		color: "Light Blue",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE1F5FE
-			},
-			{
-				weight: 100,
-				hex: 0xB3E5FC
-			},
-			{
-				weight: 200,
-				hex: 0x81D4FA
-			},
-			{
-				weight: 300,
-				hex: 0x4FC3F7
-			},
-			{
-				weight: 400,
-				hex: 0x29B6F6
-			},
-			{
-				weight: 500,
-				hex: 0x03A9F4
-			},
-			{
-				weight: 600,
-				hex: 0x039BE5
-			},
-			{
-				weight: 700,
-				hex: 0x0288D1
-			},
-			{
-				weight: 800,
-				hex: 0x0277BD
-			},
-			{
-				weight: 900,
-				hex: 0x01579B
-			}
-		]
-	},
-	{
-		color: "Cyan",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE0F7FA
-			},
-			{
-				weight: 100,
-				hex: 0xB2EBF2
-			},
-			{
-				weight: 200,
-				hex: 0x80DEEA
-			},
-			{
-				weight: 300,
-				hex: 0x4DD0E1
-			},
-			{
-				weight: 400,
-				hex: 0x26C6DA
-			},
-			{
-				weight: 500,
-				hex: 0x00BCD4
-			},
-			{
-				weight: 600,
-				hex: 0x00ACC1
-			},
-			{
-				weight: 700,
-				hex: 0x0097A7
-			},
-			{
-				weight: 800,
-				hex: 0x00838F
-			},
-			{
-				weight: 900,
-				hex: 0x006064
-			}
-		]
-	},
-	{
-		color: "Teal",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE0F2F1
-			},
-			{
-				weight: 100,
-				hex: 0xB2DFDB
-			},
-			{
-				weight: 200,
-				hex: 0x80CBC4
-			},
-			{
-				weight: 300,
-				hex: 0x4DB6AC
-			},
-			{
-				weight: 400,
-				hex: 0x26A69A
-			},
-			{
-				weight: 500,
-				hex: 0x009688
-			},
-			{
-				weight: 600,
-				hex: 0x00897B
-			},
-			{
-				weight: 700,
-				hex: 0x00796B
-			},
-			{
-				weight: 800,
-				hex: 0x00695C
-			},
-			{
-				weight: 900,
-				hex: 0x004D40
-			}
-		]
-	},
-	{
-		color: "Green",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xE8F5E9
-			},
-			{
-				weight: 100,
-				hex: 0xC8E6C9
-			},
-			{
-				weight: 200,
-				hex: 0xA5D6A7
-			},
-			{
-				weight: 300,
-				hex: 0x81C784
-			},
-			{
-				weight: 400,
-				hex: 0x66BB6A
-			},
-			{
-				weight: 500,
-				hex: 0x4CAF50
-			},
-			{
-				weight: 600,
-				hex: 0x43A047
-			},
-			{
-				weight: 700,
-				hex: 0x388E3C
-			},
-			{
-				weight: 800,
-				hex: 0x2E7D32
-			},
-			{
-				weight: 900,
-				hex: 0x1B5E20
-			}
-		]
-	},
-	{
-		color: "Light Green",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xF1F8E9
-			},
-			{
-				weight: 100,
-				hex: 0xDCEDC8
-			},
-			{
-				weight: 200,
-				hex: 0xC5E1A5
-			},
-			{
-				weight: 300,
-				hex: 0xAED581
-			},
-			{
-				weight: 400,
-				hex: 0x9CCC65
-			},
-			{
-				weight: 500,
-				hex: 0x8BC34A
-			},
-			{
-				weight: 600,
-				hex: 0x7CB342
-			},
-			{
-				weight: 700,
-				hex: 0x689F38
-			},
-			{
-				weight: 800,
-				hex: 0x558B2F
-			},
-			{
-				weight: 900,
-				hex: 0x33691E
-			}
-		]
-	},
-	{
-		color: "Lime",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xF9FBE7
-			},
-			{
-				weight: 100,
-				hex: 0xF0F4C3
-			},
-			{
-				weight: 200,
-				hex: 0xE6EE9C
-			},
-			{
-				weight: 300,
-				hex: 0xDCE775
-			},
-			{
-				weight: 400,
-				hex: 0xD4E157
-			},
-			{
-				weight: 500,
-				hex: 0xCDDC39
-			},
-			{
-				weight: 600,
-				hex: 0xC0CA33
-			},
-			{
-				weight: 700,
-				hex: 0xAFB42B
-			},
-			{
-				weight: 800,
-				hex: 0x9E9D24
-			},
-			{
-				weight: 900,
-				hex: 0x827717
-			}
-		]
-	},
-	{
-		color: "Yellow",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFFFDE7
-			},
-			{
-				weight: 100,
-				hex: 0xFFF9C4
-			},
-			{
-				weight: 200,
-				hex: 0xFFF59D
-			},
-			{
-				weight: 300,
-				hex: 0xFFF176
-			},
-			{
-				weight: 400,
-				hex: 0xFFEE58
-			},
-			{
-				weight: 500,
-				hex: 0xFFEB3B
-			},
-			{
-				weight: 600,
-				hex: 0xFDD835
-			},
-			{
-				weight: 700,
-				hex: 0xFBC02D
-			},
-			{
-				weight: 800,
-				hex: 0xF9A825
-			},
-			{
-				weight: 900,
-				hex: 0xF57F17
-			}
-		]
-	},
-	{
-		color: "Amber",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFFF8E1
-			},
-			{
-				weight: 100,
-				hex: 0xFFECB3
-			},
-			{
-				weight: 200,
-				hex: 0xFFE082
-			},
-			{
-				weight: 300,
-				hex: 0xFFD54F
-			},
-			{
-				weight: 400,
-				hex: 0xFFCA28
-			},
-			{
-				weight: 500,
-				hex: 0xFFC107
-			},
-			{
-				weight: 600,
-				hex: 0xFFB300
-			},
-			{
-				weight: 700,
-				hex: 0xFFA000
-			},
-			{
-				weight: 800,
-				hex: 0xFF8F00
-			},
-			{
-				weight: 900,
-				hex: 0xFF6F00
-			}
-		]
-	},
-	{
-		color: "Orange",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFFF3E0
-			},
-			{
-				weight: 100,
-				hex: 0xFFE0B2
-			},
-			{
-				weight: 200,
-				hex: 0xFFCC80
-			},
-			{
-				weight: 300,
-				hex: 0xFFB74D
-			},
-			{
-				weight: 400,
-				hex: 0xFFA726
-			},
-			{
-				weight: 500,
-				hex: 0xFF9800
-			},
-			{
-				weight: 600,
-				hex: 0xFB8C00
-			},
-			{
-				weight: 700,
-				hex: 0xF57C00
-			},
-			{
-				weight: 800,
-				hex: 0xEF6C00
-			},
-			{
-				weight: 900,
-				hex: 0xE65100
-			}
-		]
-	},
-	{
-		color: "Deep Orange",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFBE9E7
-			},
-			{
-				weight: 100,
-				hex: 0xFFCCBC
-			},
-			{
-				weight: 200,
-				hex: 0xFFAB91
-			},
-			{
-				weight: 300,
-				hex: 0xFF8A65
-			},
-			{
-				weight: 400,
-				hex: 0xFF7043
-			},
-			{
-				weight: 500,
-				hex: 0xFF5722
-			},
-			{
-				weight: 600,
-				hex: 0xF4511E
-			},
-			{
-				weight: 700,
-				hex: 0xE64A19
-			},
-			{
-				weight: 800,
-				hex: 0xD84315
-			},
-			{
-				weight: 900,
-				hex: 0xBF360C
-			}
-		]
-	},
-	{
-		color: "Brown",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xEFEBE9
-			},
-			{
-				weight: 100,
-				hex: 0xD7CCC8
-			},
-			{
-				weight: 200,
-				hex: 0xBCAAA4
-			},
-			{
-				weight: 300,
-				hex: 0xA1887F
-			},
-			{
-				weight: 400,
-				hex: 0x8D6E63
-			},
-			{
-				weight: 500,
-				hex: 0x795548
-			},
-			{
-				weight: 600,
-				hex: 0x6D4C41
-			},
-			{
-				weight: 700,
-				hex: 0x5D4037
-			},
-			{
-				weight: 800,
-				hex: 0x4E342E
-			},
-			{
-				weight: 900,
-				hex: 0x3E2723
-			}
-		]
-	},
-	{
-		color: "Grey",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFAFAFA
-			},
-			{
-				weight: 100,
-				hex: 0xF5F5F5
-			},
-			{
-				weight: 200,
-				hex: 0xEEEEEE
-			},
-			{
-				weight: 300,
-				hex: 0xE0E0E0
-			},
-			{
-				weight: 400,
-				hex: 0xBDBDBD
-			},
-			{
-				weight: 500,
-				hex: 0x9E9E9E
-			},
-			{
-				weight: 600,
-				hex: 0x757575
-			},
-			{
-				weight: 700,
-				hex: 0x616161
-			},
-			{
-				weight: 800,
-				hex: 0x424242
-			},
-			{
-				weight: 900,
-				hex: 0x212121
-			}
-		]
-	},
-	{
-		color: "Blue Grey",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xECEFF1
-			},
-			{
-				weight: 100,
-				hex: 0xCFD8DC
-			},
-			{
-				weight: 200,
-				hex: 0xB0BEC5
-			},
-			{
-				weight: 300,
-				hex: 0x90A4AE
-			},
-			{
-				weight: 400,
-				hex: 0x78909C
-			},
-			{
-				weight: 500,
-				hex: 0x607D8B
-			},
-			{
-				weight: 600,
-				hex: 0x546E7A
-			},
-			{
-				weight: 700,
-				hex: 0x455A64
-			},
-			{
-				weight: 800,
-				hex: 0x37474F
-			},
-			{
-				weight: 900,
-				hex: 0x263238
-			}
-		]
-	},
-	{
-		color: "Grey",
-		variations: [
-			{
-				weight: 50,
-				hex: 0xFFFFFF
-			},
-			{
-				weight: 100,
-				hex: 0xe0e0e0
-			},
-			{
-				weight: 200,
-				hex: 0xc4c4c4
-			},
-			{
-				weight: 300,
-				hex: 0xa8a8a8
-			},
-			{
-				weight: 400,
-				hex: 0x8c8c8c
-			},
-			{
-				weight: 500,
-				hex: 0x707070
-			},
-			{
-				weight: 600,
-				hex: 0x545454
-			},
-			{
-				weight: 700,
-				hex: 0x383838
-			},
-			{
-				weight: 800,
-				hex: 0x1c1c1c
-			},
-			{
-				weight: 900,
-				hex: 0x00000
-			}
-		]
-	}
-];