x4js 2.0.1 → 2.0.3

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

@@ -1,125 +0,0 @@
-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?: 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() );
-	}
-
-}

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

@@ -1,65 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 );
-		}
-	}
-}

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

@@ -1,88 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 );
-	}
-}

package/lib/src/components/colorinput/crosshairs-simple-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M479.4 240L384 240l-16 0 0 32 16 0 95.4 0C471.6 383 383 471.6 272 479.4l0-95.4 0-16-32 0 0 16 0 95.4C129 471.6 40.4 383 32.6 272l95.4 0 16 0 0-32-16 0-95.4 0C40.4 129 129 40.4 240 32.6l0 95.4 0 16 32 0 0-16 0-95.4C383 40.4 471.6 129 479.4 240zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>

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

@@ -1,133 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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));
-			}
-		}
-	}
-}