x4js 2.0.20 → 2.0.22

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

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

@@ -1,161 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file listbox.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 {
-	--listbox-item-background-sel: var( --accent-background );
-	--listbox-item-color-sel: var( --accent-color );
-	--listbox-item-color-sel-disabled: var( --disabled-background );
-
-	--listbox-item-color: var( --text-primary );
-	--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 );
-}
-
-.x4listbox {
-	@extend .vbox;
-
-	margin: 5px;
-	border: 1px solid var( --listbox-border );
-	background-color: var( --listbox-background );
-
-	&:focus-within {
-		border-color: var( --listbox-border-focus );
-	}
-
-	outline: none;
-
-	&>.x4header {
-		border-bottom: 1px solid var( --color-gray-3 );
-	}
-
-	&>.body {
-		width: 100%;
-		flex-basis: 0;
-		overflow-y: auto;
-		overflow-x: auto;
-		outline: none;
-		position: relative;
-
-		&> .x4viewport {
-			display: table;
-			
-			.x4item {
-				@extend .flex;
-				
-				padding: 4px;
-				background-color: transparent;
-				color: var( --color-gray-9 );
-
-				&> .x4label {
-					color: inherit;
-					padding: 2px 6px;
-				
-					#icon {
-						color: var( --listbox-icon-color );
-						fill: var( --listbox-icon-color );
-					}
-				}
-
-				&:hover {
-					background-color: var( --listbox-item-background-hover );
-				}
-
-				&.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{
-					//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 );
-		color: var( --listbox-item-color-disabled );
-
-		&>.body {
-			.x4viewport {
-				pointer-events: none;
-				.x4item {
-					&.selected {
-						background-color: var( --listbox-item-color-sel-disabled );
-					}
-				}
-			}
-		}
-	}
-}