x4js 2.0.12 → 2.0.13

package/lib/src/components/colorinput/colorinput.ts

@@ -1,88 +1,91 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorinput.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component } from '../../core/component';
-import { isFeatureAvailable } from '../../core/core_tools.js';
-import { Color } from '../../core/core_colors';
-
-import { BoxProps, HBox } from '../boxes/boxes';
-import { Input } from '../input/input.js';
-import { Button } from '../button/button.js';
-
-
-import "./colorinput.module.scss"
-import icon from "./crosshairs-simple-sharp-light.svg"
-
-//TODO: add swatches
-//TODO: better keyboard handling (selection after cursor)
-
-/**
- * 
- */
-
-interface ColorInputProps extends BoxProps {
-	color: Color | string;
-}
-
-/**
- * 
- */
-
-export class ColorInput extends HBox<ColorInputProps> {
-	constructor( props: ColorInputProps ) {
-		super( props );
-
-		let swatch: Component;
-		let edit: Input;
-
-		this.setContent( [
-			swatch = new Component( { cls: "swatch" } ),
-			edit = new Input( { type: "text", value: "", spellcheck: false } ),
-
-			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
-				const eyeDropper = new (window as any).EyeDropper();
-				eyeDropper.open( ).then( ( result: any ) => {
-					color = new Color( result.sRGBHex );
-					updateColor( color );
-				});
-			} } ) : null
-		])
-
-		edit.addDOMEvent( "input", ( ) => {
-			const txt = edit.getValue( );
-			const clr = new Color( txt );
-			if( !clr.isInvalid() ) {
-				color = clr;
-				updateColor( color );
-			}
-		});
-
-		const updateColor = ( clr: Color ) => {
-			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
-			edit.setValue( clr.toRgbString(false) );
-		}
-
-		let color: Color;
-		if( props.color instanceof Color ) {
-			color = props.color;
-		}
-		else {
-			color = new Color( props.color );
-		}
-
-		updateColor( color );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file colorinput.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component } from '../../core/component';
+import { isFeatureAvailable, class_ns } from '../../core/core_tools.js';
+import { Color } from '../../core/core_colors';
+
+import { BoxProps, HBox } from '../boxes/boxes';
+import { Input } from '../input/input.js';
+import { Button } from '../button/button.js';
+
+
+import "./colorinput.module.scss"
+import icon from "./crosshairs-simple-sharp-light.svg"
+
+//TODO: add swatches
+//TODO: better keyboard handling (selection after cursor)
+
+/**
+ * 
+ */
+
+interface ColorInputProps extends BoxProps {
+	color: Color | string;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class ColorInput extends HBox<ColorInputProps> {
+	static "$cls-ns" = "x4";
+
+	constructor( props: ColorInputProps ) {
+		super( props );
+
+		let swatch: Component;
+		let edit: Input;
+
+		this.setContent( [
+			swatch = new Component( { cls: "swatch" } ),
+			edit = new Input( { type: "text", value: "", spellcheck: false } ),
+
+			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
+				const eyeDropper = new (window as any).EyeDropper();
+				eyeDropper.open( ).then( ( result: any ) => {
+					color = new Color( result.sRGBHex );
+					updateColor( color );
+				});
+			} } ) : null
+		])
+
+		edit.addDOMEvent( "input", ( ) => {
+			const txt = edit.getValue( );
+			const clr = new Color( txt );
+			if( !clr.isInvalid() ) {
+				color = clr;
+				updateColor( color );
+			}
+		});
+
+		const updateColor = ( clr: Color ) => {
+			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
+			edit.setValue( clr.toRgbString(false) );
+		}
+
+		let color: Color;
+		if( props.color instanceof Color ) {
+			color = props.color;
+		}
+		else {
+			color = new Color( props.color );
+		}
+
+		updateColor( color );
+	}
 }

package/lib/src/components/colorpicker/colorpicker.module.scss

@@ -1,133 +1,133 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorpicker.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-@mixin overlay-shadow {
-	width: 12px;
-	height: 12px;
-	border: 2px solid white;
-	border-radius: 8px;
-	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-}
-
-.x4colorpicker {
-	width: 240px;
-	gap: 4px;
-
-	touch-action: none;
-	outline: none;
-
-	margin: 8px;
-	&:focus {
-		//@include outline-focus;
-	}
-
-	.overlay {
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-	}
-
-	.x4saturation {
-		width: 100%;
-		
-		height: 140px;
-		position: relative;
-		
-		.thumb {
-			@include overlay-shadow;
-			position: absolute;
-			transform: translate(-50%,50%);
-		}
-	}
-
-	.body {
-		gap: 4px;
-
-		&> .x4vbox {
-			gap: 4px;
-		}
-		
-		.x4hueslider {
-			position: relative;
-			height: 16px;
-			overflow: hidden;
-			
-			background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 212), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
-			border: 1px solid var( --color-gray-3 );
-
-			.thumb {
-				@include overlay-shadow;
-				position: absolute;
-				transform: translate(-50%,-50%);
-				top: 50%;
-			}
-	
-		}
-
-		.x4alphaslider {
-			position: relative;
-			height: 16px;
-			overflow: hidden;
-
-			.checkers {
-				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
-									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
-									linear-gradient(45deg, transparent 75%, #ccc 75%), 
-									linear-gradient(-45deg, transparent 75%, #ccc 75%);
-				background-size: 8px 8px;
-				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
-			}
-
-			.color {
-				//border-radius: 8px;
-				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
-			}
-
-			.thumb {
-				@include overlay-shadow;
-
-				position: absolute;
-				transform: translate(-50%,-50%);
-				top: 50%;
-			}
-	
-		}
-
-		.swatch {
-			width: 36px;
-			height: 36px;
-
-			.checkers {
-				border-radius: 8px;
-				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
-									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
-									linear-gradient(45deg, transparent 75%, #ccc 75%), 
-									linear-gradient(-45deg, transparent 75%, #ccc 75%);
-				background-size: 8px 8px;
-				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
-			}
-
-			.color {
-				border-radius: 8px;
-				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
-			}
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file colorpicker.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+@use "../shared.scss";
+
+@mixin overlay-shadow {
+	width: 12px;
+	height: 12px;
+	border: 2px solid white;
+	border-radius: 8px;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.x4colorpicker {
+	width: 240px;
+	gap: 4px;
+
+	touch-action: none;
+	outline: none;
+
+	margin: 8px;
+	&:focus {
+		//@include outline-focus;
+	}
+
+	.overlay {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.x4saturation {
+		width: 100%;
+		
+		height: 140px;
+		position: relative;
+		
+		.thumb {
+			@include overlay-shadow;
+			position: absolute;
+			transform: translate(-50%,50%);
+		}
+	}
+
+	.body {
+		gap: 4px;
+
+		&> .x4vbox {
+			gap: 4px;
+		}
+		
+		.x4hueslider {
+			position: relative;
+			height: 16px;
+			overflow: hidden;
+			
+			background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 212), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
+			border: 1px solid var( --color-gray-3 );
+
+			.thumb {
+				@include overlay-shadow;
+				position: absolute;
+				transform: translate(-50%,-50%);
+				top: 50%;
+			}
+	
+		}
+
+		.x4alphaslider {
+			position: relative;
+			height: 16px;
+			overflow: hidden;
+
+			.checkers {
+				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(45deg, transparent 75%, #ccc 75%), 
+									linear-gradient(-45deg, transparent 75%, #ccc 75%);
+				background-size: 8px 8px;
+				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+			}
+
+			.color {
+				//border-radius: 8px;
+				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
+			}
+
+			.thumb {
+				@include overlay-shadow;
+
+				position: absolute;
+				transform: translate(-50%,-50%);
+				top: 50%;
+			}
+	
+		}
+
+		.swatch {
+			width: 36px;
+			height: 36px;
+
+			.checkers {
+				border-radius: 8px;
+				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(45deg, transparent 75%, #ccc 75%), 
+									linear-gradient(-45deg, transparent 75%, #ccc 75%);
+				background-size: 8px 8px;
+				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+			}
+
+			.color {
+				border-radius: 8px;
+				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
+			}
+		}
+	}
 }