x4js 2.0.13 → 2.0.15

package/lib/src/components/label/label.ts

@@ -62,3 +62,36 @@ export class Label extends Component<LabelProps> {
 	}
 }
 
+// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface SimpleTextProps extends ComponentProps {
+	text: string | UnsafeHtml;
+	align?: "left" | "center" | "right";
+}
+
+@class_ns( "x4" )
+export class SimpleText extends Component<SimpleTextProps> {
+	
+	/**
+	 * 
+	 */
+	
+	constructor( p: SimpleTextProps ) {
+		super( { ...p } );
+
+		this.setContent( p.text );
+
+		if( p.align ) {
+			this.addClass( "al-"+p.align );
+		}
+	}	
+
+	/**
+	 * 
+	 */
+
+	setText( text: string | UnsafeHtml ) {
+		this.setContent( text );
+		this.setClass( "empty", !text );
+	}
+}

package/lib/src/components/link/link.ts

@@ -1,78 +1,81 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file link.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, ComponentEvents, ComponentProps, EvClick } from '@core/component';
-import { EventCallback } from '@core/core_events.js';
-import { class_ns, UnsafeHtml } from '@core/core_tools';
-
-
-/**
- * Link events
- */
-
-interface LinkEvents extends ComponentEvents {
-	click: EvClick;	// context = href
-}
-
-/**
- * 
- */
-
-interface LinkProps extends ComponentProps {
-	href: string;
-	text: string | UnsafeHtml;	// you can also use content for complexe content
-	click?: EventCallback<EvClick>;
-}
-
-@class_ns( "x4" )
-export class Link extends Component<LinkProps,LinkEvents> {
-	constructor( props: LinkProps ) {
-		super( { tag: "a", ...props} );
-
-		this.setAttribute( "href", props.href );
-		this.mapPropEvents( props, "click" );
-
-		if( props.text ) {
-			this.setContent( props.text );
-		}
-
-		this.addDOMEvent('click', (e) => this._on_click(e));
-	}
-
-	/**
-	 * 
-	 * @param text 
-	 */
-
-	setText( text: string | UnsafeHtml ) {
-		this.setContent( text );
-	}
-
-	/**
-	 * 
-	 */
-
-	protected _on_click( ev: MouseEvent ) {
-
-		const xev: EvClick = {context: this.props.href };
-		this.fire('click', xev );
-	
-		if( xev.preventDefault ) {
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file link.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, ComponentEvents, ComponentProps, EvClick } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { Label } from '../label/label';
+
+
+/**
+ * Link events
+ */
+
+interface LinkEvents extends ComponentEvents {
+	click: EvClick;	// context = href
+}
+
+/**
+ * 
+ */
+
+interface LinkProps extends ComponentProps {
+	href: string;
+	text?: string | UnsafeHtml;	// you can also use content for complexe content
+	icon?: string;
+	click?: EventCallback<EvClick>;
+}
+
+@class_ns( "x4" )
+export class Link extends Component<LinkProps,LinkEvents> {
+	constructor( props: LinkProps ) {
+		super( { tag: "a", ...props} );
+
+		this.setAttribute( "href", props.href );
+		this.mapPropEvents( props, "click" );
+
+		this.setContent( new Label( {
+			text: props.text,
+			icon: props.icon,
+		} ) );
+
+		this.addDOMEvent('click', (e) => this._on_click(e));
+	}
+
+	/**
+	 * 
+	 * @param text 
+	 */
+
+	setText( text: string | UnsafeHtml ) {
+		this.setContent( text );
+	}
+
+	/**
+	 * 
+	 */
+
+	protected _on_click( ev: MouseEvent ) {
+
+		const xev: EvClick = {context: this.props.href };
+		this.fire('click', xev );
+	
+		if( xev.preventDefault ) {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+}

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

@@ -25,6 +25,9 @@
 	--listbox-item-color-disabled: var( --disabled-color-dark );
 	--listbox-item-background-hover: var( --background-secondary );
 
+	--listbox-icon-color: var( --text-ternary );
+
+	--listbox-background: white;
 	--listbox-border: var( --border );
 	--listbox-border-focus: var( --accent-background-focus );
 }
@@ -34,6 +37,7 @@
 
 	margin: 5px;
 	border: 1px solid var( --listbox-border );
+	background-color: var( --listbox-background );
 
 	&:focus-within {
 		border-color: var( --listbox-border-focus );
@@ -51,8 +55,9 @@
 		overflow-y: auto;
 		overflow-x: auto;
 		outline: none;
+		position: relative;
 
-		.x4viewport {
+		&> .x4viewport {
 			display: table;
 			
 			.x4item {
@@ -65,6 +70,11 @@
 				&> .x4label {
 					color: inherit;
 					padding: 2px 6px;
+				
+					#icon {
+						color: var( --listbox-icon-color );
+						fill: var( --listbox-icon-color );
+					}
 				}
 
 				&:hover {
@@ -74,16 +84,64 @@
 				&.selected {
 					background-color: var( --listbox-item-background-sel );
 					color: var( --listbox-item-color-sel );
+
+					&> .x4label {
+						#icon {
+							color: var( --listbox-item-color-sel );
+							fill: var( --listbox-item-color-sel );
+						}
+					}
 				}
 
-				&:active{
+				//&:active{
 					//background-color: var( --color-80 );
 					//color: var(--color-0);
-				}	
+				//}	
 			}
 		}
 	}
 
+	&> #footer {
+		border-top: 1px solid var(--border);
+		margin: 0;
+
+		&.x4btngroup {
+			gap: 0px;
+
+			.x4button {
+				background-color: var( --ol-button-background );
+				margin: 0;
+				color: var( --ol-button-color );
+
+				&:disabled {
+					color: var( --ol-button-color-disabled );
+				}
+								
+				.x4icon {
+					height: 1.5em;
+					width: 1.5em;
+				}
+
+				&:hover{
+					background-color: var( --ol-button-background-hover );
+					color: var( --ol-button-color-hover );
+				}	
+
+				&:active{
+					background-color: var( --ol-button-background-active );
+					color: var( --ol-button-color-active );
+					#icon {
+						color: var( --button-icon-color );
+					}
+				}	
+
+				&:focus {
+					background-color: var( --ol-button-background-hover );
+				}
+			}
+		}
+	}		
+
 	&[disabled] {
 		cursor: not-allowed;
 		border-color: var( --border );