x4js 2.0.11 → 2.0.13

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

@@ -1,30 +1,30 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file icon.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";
-
-.x4icon {
-	@extend .hbox;	
-
-	min-width: 10px;
-	height: 10px;
-    overflow: hidden;
-    
-	svg {
-		width: 100%;
-		height: 100%;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file icon.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";
+
+.x4icon {
+	@extend .hbox;	
+
+	min-width: 10px;
+	height: 10px;
+    overflow: hidden;
+    
+	svg {
+		width: 100%;
+		height: 100%;
+	}
 }

package/lib/src/components/icon/icon.ts

@@ -1,134 +1,136 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file icon.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, ComponentProps } from '../../core/component';
-
-import "./icon.module.scss"
-
-type solveCallback = (data:string)=>void;
-
-/**
- * 
- */
-
-class SvgLoader {
-	private cache: Map<string,string>;
-	private waiters: Map<string,solveCallback[]>;
-
-	constructor( ) {
-		this.cache = new Map( );
-		this.waiters = new Map( );
-	}
-
-	async load( file: string ): Promise<string> {
-
-		if( this.cache.has(file) ) {
-			return Promise.resolve( this.cache.get(file) );
-		}
-
-		return new Promise( (resolve,reject) => {
-			if( this.waiters.has(file) ) {
-				this.waiters.get(file).push( resolve );
-			}
-			else {
-				this.waiters.set( file, [resolve] );
-				this._load( file )
-					.then( ( data: string ) => {
-						console.timeEnd( file );
-						this.cache.set( file, data );
-						const ww = this.waiters.get( file );
-						ww.forEach( cb => cb(data ) );
-					})
-			}
-		});
-	}
-
-	private async _load( file: string ): Promise<string> {
-		console.time( file );
-		const res = await fetch( file );
-		if( res.ok ) {
-			return res.text( );
-		}
-	}
-
-}
-
-export const svgLoader = new SvgLoader( );
-
-/**
- * 
- */
-
-export interface IconProps extends ComponentProps {
-	iconId?: string;
-}
-
-/**
- * 
- */
-
-export class Icon extends Component<IconProps> {
-
-	constructor( props: IconProps ) {
-		super( props );
-
-		this.setIcon( props.iconId );
-	}
-
-	/**
-	 * change the icon content
-	 * @param iconId if name is starting with var: then we use css variable name a path
-	 * @example
-	 * 
-	 * setIcon( "var:home" )
-	 * 
-	 * import myicon from "./myicon.svg"
-	 * setIcon( myicon );
-	 * 
-	 */
-
-	setIcon( iconId: string ) {
-		if( iconId ) {
-			if( iconId.startsWith('var:') ) {
-				do {
-					const path = iconId.substring( 4 );
-					iconId = document.documentElement.style.getPropertyValue( path );
-				} while( iconId.startsWith('var:') );
-			} 
-
-			if( iconId.startsWith("data:image/svg+xml,<svg") ) {
-				this.dom.insertAdjacentHTML('beforeend', iconId.substring(19) );
-			}
-			else if( iconId.endsWith(".svg") ) {
-				svgLoader.load( iconId ).then( svg => {
-					this.clearContent( );
-					this.dom.insertAdjacentHTML('beforeend', svg );
-				});
-			}
-			else {
-				this.setContent( new Component( { tag: "img", attrs: { src: iconId } } ) );
-			}
-		}
-		else {
-			this.clearContent( );
-			this.addClass( "empty" );
-		}
-	}
-}
-
-
-
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file icon.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 { class_ns } from '@core/core_tools.js';
+import { Component, ComponentProps } from '../../core/component';
+
+import "./icon.module.scss"
+
+type solveCallback = (data:string)=>void;
+
+/**
+ * 
+ */
+
+class SvgLoader {
+	private cache: Map<string,string>;
+	private waiters: Map<string,solveCallback[]>;
+
+	constructor( ) {
+		this.cache = new Map( );
+		this.waiters = new Map( );
+	}
+
+	async load( file: string ): Promise<string> {
+
+		if( this.cache.has(file) ) {
+			return Promise.resolve( this.cache.get(file) );
+		}
+
+		return new Promise( (resolve,reject) => {
+			if( this.waiters.has(file) ) {
+				this.waiters.get(file).push( resolve );
+			}
+			else {
+				this.waiters.set( file, [resolve] );
+				this._load( file )
+					.then( ( data: string ) => {
+						console.timeEnd( file );
+						this.cache.set( file, data );
+						const ww = this.waiters.get( file );
+						ww.forEach( cb => cb(data ) );
+					})
+			}
+		});
+	}
+
+	private async _load( file: string ): Promise<string> {
+		console.time( file );
+		const res = await fetch( file );
+		if( res.ok ) {
+			return res.text( );
+		}
+	}
+
+}
+
+export const svgLoader = new SvgLoader( );
+
+/**
+ * 
+ */
+
+export interface IconProps extends ComponentProps {
+	iconId?: string;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Icon extends Component<IconProps> {
+
+	constructor( props: IconProps ) {
+		super( props );
+
+		this.setIcon( props.iconId );
+	}
+
+	/**
+	 * change the icon content
+	 * @param iconId if name is starting with var: then we use css variable name a path
+	 * @example
+	 * 
+	 * setIcon( "var:home" )
+	 * 
+	 * import myicon from "./myicon.svg"
+	 * setIcon( myicon );
+	 * 
+	 */
+
+	setIcon( iconId: string ) {
+		if( iconId ) {
+			if( iconId.startsWith('var:') ) {
+				do {
+					const path = iconId.substring( 4 );
+					iconId = document.documentElement.style.getPropertyValue( path );
+				} while( iconId.startsWith('var:') );
+			} 
+
+			if( iconId.startsWith("data:image/svg+xml,<svg") ) {
+				this.dom.insertAdjacentHTML('beforeend', iconId.substring(19) );
+			}
+			else if( iconId.endsWith(".svg") ) {
+				svgLoader.load( iconId ).then( svg => {
+					this.clearContent( );
+					this.dom.insertAdjacentHTML('beforeend', svg );
+				});
+			}
+			else {
+				this.setContent( new Component( { tag: "img", attrs: { src: iconId } } ) );
+			}
+		}
+		else {
+			this.clearContent( );
+			this.addClass( "empty" );
+		}
+	}
+}
+
+
+
+

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

@@ -1,21 +1,21 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file image.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.
- **/
-
-
-.x-image {
-	position: relative;
-	background: none;
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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.
+ **/
+
+
+.x-image {
+	position: relative;
+	background: none;
 }

package/lib/src/components/image/image.ts

@@ -1,67 +1,69 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file image.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, ComponentProps } from '../../core/component.js';
-
-import "./image.module.scss"
-
-export interface ImageProps extends ComponentProps {
-	src: string;
-	fit?: "contain" | "cover" | "fill" | "scale-down";
-	position?: string;
-	lazy?: boolean;
-	alt?: string;
-	draggable?: boolean;
-}
-
-/**
- * 
- */
-
-export class Image extends Component<ImageProps> {
-
-	private _img: Component;
-
-	constructor( props: ImageProps ) {
-		super( props );
-
-		this._img = new Component( {
-			tag: "img",
-			attrs: {
-				loading: props.lazy,
-				alt: props.alt,
-				draggable: props.draggable ?? false,
-			},
-			style: {
-				width: "100%",
-				height: "100%",
-				objectFit: props.fit,
-				objectPosition: props.position,
-			}
-		})
-		
-		this.setContent( this._img );
-		this.setImage( props.src );
-	}
-
-	/**
-	 * 
-	 */
-	
-	setImage( src: string ) {
-		this._img.setAttribute( "src", src );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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 { class_ns } from '@core/core_tools.js';
+import { Component, ComponentProps } from '../../core/component.js';
+
+import "./image.module.scss"
+
+export interface ImageProps extends ComponentProps {
+	src: string;
+	fit?: "contain" | "cover" | "fill" | "scale-down";
+	position?: string;
+	lazy?: boolean;
+	alt?: string;
+	draggable?: boolean;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Image extends Component<ImageProps> {
+
+	private _img: Component;
+
+	constructor( props: ImageProps ) {
+		super( props );
+
+		this._img = new Component( {
+			tag: "img",
+			attrs: {
+				loading: props.lazy,
+				alt: props.alt,
+				draggable: props.draggable ?? false,
+			},
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: props.fit,
+				objectPosition: props.position,
+			}
+		})
+		
+		this.setContent( this._img );
+		this.setImage( props.src );
+	}
+
+	/**
+	 * 
+	 */
+	
+	setImage( src: string ) {
+		this._img.setAttribute( "src", src );
+	}
 }

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

@@ -1,69 +1,69 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file input.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 {
-	--input-sel-background: var( --accent-background );
-	--input-sel-color: var( --accent-color );
-	--input-placeholder: var( --disabled-background );
-	--input-error: var( --alert-background );
-}
-
-input.x4input {
-	font: inherit;
-	outline: none;
-	
-	border: none;
-
-	&::selection {
-		background-color: var( --input-sel-background );
-		color: var( --input-sel-color );
-	}
-	
-	&[type="text"], 
-	&[type="password"],
-	&[type="email"] {
-		padding: 8px 4px;
-	}
-
-	&[type="checkbox"]:checked,
-	&[type="radio"]:checked {
-		accent-color: var( --color-80 );
-	}
-
-	&[type="range"] {
-		accent-color: var( --color-60 );
-	}
-
-	&::placeholder {
-		color: var( --input-placeholder );
-		font-style: italic;
-		font-weight: 90%;
-
-	}
-
-	&[type="password"] {
-		font-weight: bold;
-	}
-
-	&:disabled {
-		background-color: transparent;
-	}
-
-	&:invalid {
-		color: var( --input-error );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file input.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 {
+	--input-sel-background: var( --accent-background );
+	--input-sel-color: var( --accent-color );
+	--input-placeholder: var( --disabled-background );
+	--input-error: var( --alert-background );
+}
+
+input.x4input {
+	font: inherit;
+	outline: none;
+	
+	border: none;
+
+	&::selection {
+		background-color: var( --input-sel-background );
+		color: var( --input-sel-color );
+	}
+	
+	&[type="text"], 
+	&[type="password"],
+	&[type="email"] {
+		padding: 8px 4px;
+	}
+
+	&[type="checkbox"]:checked,
+	&[type="radio"]:checked {
+		accent-color: var( --color-80 );
+	}
+
+	&[type="range"] {
+		accent-color: var( --color-60 );
+	}
+
+	&::placeholder {
+		color: var( --input-placeholder );
+		font-style: italic;
+		font-weight: 90%;
+
+	}
+
+	&[type="password"] {
+		font-weight: bold;
+	}
+
+	&:disabled {
+		background-color: transparent;
+	}
+
+	&:invalid {
+		color: var( --input-error );
+	}
+}
+