x4js 2.0.12 → 2.0.14

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

@@ -1,142 +1,142 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file checkbox.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";
-
-:root {
-	--checkbox-background-check: var( --accent-background );
-	--checkbox-background-check-hover: var( --accent-background-hover );
-	--checkbox-background-disabled: var( --disabled-color );
-	--checkbox-background-disabled-check: var( --disabled-background );
-	--checkbox-color-disabled: var( --disabled-background );
-	--checkbox-check-border: var( --border );
-	--checkbox-check-border-hover: var( --border-hover );
-}
-
-.x4checkbox {
-	@extend .hbox;
-	
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	margin: 5px;
-	padding: 4px;
-	gap: 4px;
-	cursor: pointer;
-	
-	.inner {
-		height: 1rem;
-		width: 1rem;
-		color: white;
-		position: relative;
-		order: 1;
-		
-		input {
-			appearance: none;
-			outline: none;
-			
-			cursor: pointer;
-			display: block;
-			margin: 0;
-			padding: 0;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			transition: opacity .1s ease;
-
-			&:checked {
-				background-color: var( --checkbox-background-check );
-			}
-
-			&:checked:hover {
-				background-color: var( --checkbox-background-check-hover );
-			}
-
-			&:not(:checked) {
-				border: 1px solid var( --checkbox-check-border );
-			}
-
-			&:not(:checked):hover {
-				border: 1px solid var( --checkbox-check-border-hover );
-			}
-		}
-
-		svg {
-			margin: auto;
-			pointer-events: none;
-			position: absolute;
-			opacity: 0;
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			width: 100%;
-			height: 50%;
-		}
-
-		&:has(input:checked) {
-			input {
-				opacity: 1;
-			}
-
-			svg {
-				opacity: 1;
-			}
-		}
-	}
-
-	&:focus-within {
-		label #text {
-			text-decoration: underline;
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-			
-		label {
-		
-			pointer-events: none;
-			color: var( --checkbox-color-disabled );
-		}
-
-		.inner {
-			pointer-events: none;
-			input {
-				background-color: var( --checkbox-background-disabled );
-			
-				&:checked {
-					background-color: var( --checkbox-background-disabled-check );
-				}
-			}
-		}
-	}
-
-	label {
-		text-align: right;
-		cursor: inherit;
-		order: 2;
-	}
-
-	&.left #label {
-		order: 0;
-		text-align: left;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file checkbox.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";
+
+:root {
+	--checkbox-background-check: var( --accent-background );
+	--checkbox-background-check-hover: var( --accent-background-hover );
+	--checkbox-background-disabled: var( --disabled-color );
+	--checkbox-background-disabled-check: var( --disabled-background );
+	--checkbox-color-disabled: var( --disabled-background );
+	--checkbox-check-border: var( --border );
+	--checkbox-check-border-hover: var( --border-hover );
+}
+
+.x4checkbox {
+	@extend .hbox;
+	
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	margin: 5px;
+	padding: 4px;
+	gap: 4px;
+	cursor: pointer;
+	
+	.inner {
+		height: 1rem;
+		width: 1rem;
+		color: white;
+		position: relative;
+		order: 1;
+		
+		input {
+			appearance: none;
+			outline: none;
+			
+			cursor: pointer;
+			display: block;
+			margin: 0;
+			padding: 0;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			transition: opacity .1s ease;
+
+			&:checked {
+				background-color: var( --checkbox-background-check );
+			}
+
+			&:checked:hover {
+				background-color: var( --checkbox-background-check-hover );
+			}
+
+			&:not(:checked) {
+				border: 1px solid var( --checkbox-check-border );
+			}
+
+			&:not(:checked):hover {
+				border: 1px solid var( --checkbox-check-border-hover );
+			}
+		}
+
+		svg {
+			margin: auto;
+			pointer-events: none;
+			position: absolute;
+			opacity: 0;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 100%;
+			height: 50%;
+		}
+
+		&:has(input:checked) {
+			input {
+				opacity: 1;
+			}
+
+			svg {
+				opacity: 1;
+			}
+		}
+	}
+
+	&:focus-within {
+		label #text {
+			text-decoration: underline;
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+			
+		label {
+		
+			pointer-events: none;
+			color: var( --checkbox-color-disabled );
+		}
+
+		.inner {
+			pointer-events: none;
+			input {
+				background-color: var( --checkbox-background-disabled );
+			
+				&:checked {
+					background-color: var( --checkbox-background-disabled-check );
+				}
+			}
+		}
+	}
+
+	label {
+		text-align: right;
+		cursor: inherit;
+		order: 2;
+	}
+
+	&.left #label {
+		order: 0;
+		text-align: left;
+	}
 }

package/lib/src/components/checkbox/checkbox.ts

@@ -1,125 +1,140 @@
-import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component.js';
-import { EventCallback } from '../../core/core_events.js';
-
-import { Input } from '../input/input';
-import { Label } from '../label/label';
-
-import { svgLoader } from '../icon/icon.js';
-
-import "./checkbox.module.scss"
-import icon from "./check.svg";
-
-/**
- * Checkbox events
- */
-
-interface CheckBoxEvents extends ComponentEvents {
-	change?: EvChange;
-}
-
-/**
- * Checkbox properties.
- */
-
-interface CheckboxProps extends ComponentProps {
-	label: string; 			// The text label for the checkbox.
-	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
-	value?: boolean | number | string;			// Optional value associated with the checkbox.
-	change?: EventCallback<EvChange>;
-}
-
-/**
- * Checkbox component that can be checked or unchecked.
- */
-
-export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
-
-	readonly _input: Input;
-
-	/**
-     * Creates an instance of the Checkbox component.
-     * 
-     * @param {CheckboxProps} props - The properties for the checkbox component, including label, checked state, and value.
-     * @example
-     * const checkbox = new Checkbox({ label: 'Accept Terms', checked: true });
-     */
-
-	constructor( props: CheckboxProps ) {
-		super( props );
-
-		const inputId = makeUniqueComponentId( );
-
-		this.mapPropEvents( props, 'change' );
-
-		this.setContent( [
-			new Component( {
-				cls: 'inner',
-				content: [
-					this._input = new Input( { 
-						type:"checkbox", 
-						id: inputId, 
-						checked: props.checked,
-						dom_events: {
-							change: ( ) => this._on_change( ),
-						}
-					})
-				] 
-			}),
-			new Label( { 
-				tag: 'label',
-				text: props.label, 
-				labelFor: inputId, 
-				id: undefined 
-			} ),
-		])
-
-		svgLoader.load( icon ).then( svg => {
-			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
-		});
-	}
-
-	/**
-	 * check state changed
-	 */
-
-	private _on_change() {
-		this.fire('change', { value:this.getCheck() } );
-	}
-
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
-		const d = this._input.dom as HTMLInputElement;
-		return d.checked;
-	}
-
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
-	public setCheck(ck: boolean) {
-		const d = this._input.dom as HTMLInputElement;
-		d.checked = ck;
-	}
-
-	/**
-	 * change the checkbox label
-	 * @param text 
-	 */
-
-	public setLabel(text: string) {
-		this.query<Label>('label').setText( text );
-	}
-
-	/**
-	 * toggle the checkbox
-	 */
-
-	public toggle() {
-		this.setCheck( !this.getCheck() );
-	}
-
+import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component.js';
+import { EventCallback } from '../../core/core_events.js';
+
+import { Input } from '../input/input';
+import { Label } from '../label/label';
+
+import { svgLoader } from '../icon/icon.js';
+
+import "./checkbox.module.scss"
+import icon from "./check.svg";
+import { class_ns } from '@core/core_tools.js';
+
+/**
+ * Checkbox events
+ */
+
+interface CheckBoxEvents extends ComponentEvents {
+	change?: EvChange;
+}
+
+/**
+ * Checkbox properties.
+ */
+
+interface CheckboxProps extends ComponentProps {
+	label: string; 			// The text label for the checkbox.
+	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
+	value?: boolean | number | string;			// Optional value associated with the checkbox.
+	name?: string;
+	change?: EventCallback<EvChange>;
+}
+
+/**
+ * Checkbox component that can be checked or unchecked.
+ */
+
+@class_ns( "x4" )
+export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
+	readonly _input: Input;
+
+	/**
+     * Creates an instance of the Checkbox component.
+     * 
+     * @param {CheckboxProps} props - The properties for the checkbox component, including label, checked state, and value.
+     * @example
+     * const checkbox = new Checkbox({ label: 'Accept Terms', checked: true });
+     */
+
+	constructor( props: CheckboxProps ) {
+		super( props );
+
+		const inputId = makeUniqueComponentId( );
+
+		this.mapPropEvents( props, 'change' );
+
+		this.setContent( [
+			new Component( {
+				cls: 'inner',
+				content: [
+					this._input = new Input( { 
+						type:"checkbox", 
+						id: inputId, 
+						name: props.name,
+						checked: props.checked,
+						dom_events: {
+							change: ( ) => this._on_change( ),
+						}
+					})
+				] 
+			}),
+			new Label( { 
+				tag: 'label',
+				text: props.label, 
+				labelFor: inputId, 
+				id: undefined 
+			} ),
+		])
+
+		svgLoader.load( icon ).then( svg => {
+			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
+		});
+
+		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
+	}
+
+	/**
+	 * handle click outside label & input
+	 */
+	
+	protected _on_click( ev: MouseEvent ) {
+		if( ev.target==this.dom ) {
+			(this._input.dom as HTMLInputElement).click( );
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+
+	/**
+	 * check state changed
+	 */
+
+	private _on_change() {
+		this.fire('change', { value:this.getCheck() } );
+	}
+
+	/**
+	 * @return the checked value
+	 */
+
+	public getCheck() {
+		return this._input.getCheck();
+	}
+
+	/**
+	 * change the checked value
+	 * @param {boolean} ck new checked value	
+	 */
+
+	public setCheck(ck: boolean) {
+		this._input.setCheck( ck );
+	}
+
+	/**
+	 * change the checkbox label
+	 * @param text 
+	 */
+
+	public setLabel(text: string) {
+		this.query<Label>('label').setText( text );
+	}
+
+	/**
+	 * toggle the checkbox
+	 */
+
+	public toggle() {
+		this.setCheck( !this.getCheck() );
+	}
+
 }

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

@@ -1,65 +1,65 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorinput.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.
- **/
-
-:root {
-	--colorinput-btn-background: inherit;
-	--colorinput-btn-color: var( --text-secondary );
-	--colorinput-btn-color-hover: var( --text-primary );	
-}
-
-.x4colorinput {
-	margin: 5px;
-	border-bottom: 1px solid var( --border );
-	outline: none;
-
-	&:focus-within {
-		border-bottom-color: var( --border-focus );
-	}
-
-	.swatch {
-		margin: 4px;
-		width: 1rem;
-		height: 1rem;
-	}
-
-	input {
-		outline: none;
-		margin: 0;
-		height: 100%;
-		flex-grow: 1;
-	}
-
-	.x4button {
-		margin: 0;
-		padding: 0;
-		outline: none;
-		background-color: var( --combobox-btn-background );
-		color: var( --colorinput-btn-color );
-
-		#icon {
-			color: var( --colorinput-btn-color );
-		}
-
-		&:hover, &:hover #icon {
-			color: var( --colorinput-btn-color-hover );
-		}
-
-		&:focus {
-			//background-color: var( --color-30 );
-			//color: var( --color-10 );
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file colorinput.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.
+ **/
+
+:root {
+	--colorinput-btn-background: inherit;
+	--colorinput-btn-color: var( --text-secondary );
+	--colorinput-btn-color-hover: var( --text-primary );	
+}
+
+.x4colorinput {
+	margin: 5px;
+	border-bottom: 1px solid var( --border );
+	outline: none;
+
+	&:focus-within {
+		border-bottom-color: var( --border-focus );
+	}
+
+	.swatch {
+		margin: 4px;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	input {
+		outline: none;
+		margin: 0;
+		height: 100%;
+		flex-grow: 1;
+	}
+
+	.x4button {
+		margin: 0;
+		padding: 0;
+		outline: none;
+		background-color: var( --combobox-btn-background );
+		color: var( --colorinput-btn-color );
+
+		#icon {
+			color: var( --colorinput-btn-color );
+		}
+
+		&:hover, &:hover #icon {
+			color: var( --colorinput-btn-color-hover );
+		}
+
+		&:focus {
+			//background-color: var( --color-30 );
+			//color: var( --color-10 );
+		}
+	}
 }