x4js 1.6.4 → 2.0.1

package/lib/src/components/menu/menu.ts

@@ -0,0 +1,168 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file menu.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 { DOMEventHandler } from '@core/core_dom';
+import { Timer, UnsafeHtml, isString } from '@core/core_tools';
+
+import { Popup, PopupProps } from '../popup/popup';
+import { Icon } from '../icon/icon';
+
+import "./menu.module.scss"
+
+const OPEN_DELAY = 400;
+
+/**
+ * 
+ */
+
+export interface MenuItem {
+	cls?: string;
+	icon?: string;
+	text: string | UnsafeHtml;
+	menu?: Menu;
+	disabled?: true;
+	click?: DOMEventHandler;
+}
+
+type MenuElement = MenuItem | Component | string;
+
+export interface MenuProps extends Omit<PopupProps,"content"> {
+	items: MenuElement[];
+}
+
+/**
+ * 
+ */
+
+class CMenuSep extends Component {
+	constructor( ) {
+		super( { } );
+	}
+}
+
+
+const openTimer = new Timer( );
+
+/**
+ * 
+ */
+
+class CMenuItem extends Component {
+
+	private menu: Menu;
+	
+	constructor( itm: MenuItem ) {
+		super( { disabled: itm.disabled, cls: itm.cls } );
+
+		if( itm.menu ) {
+			this.addClass( "popup" );
+		}
+
+		this.setContent( [
+			new Icon({ id:"icon",iconId:itm.icon}), 
+			new Component( { id: "text", content: itm.text } )
+		]);
+
+		if( itm.menu ) {
+			this.menu = itm.menu;
+			
+			this.addDOMEvent( "mouseenter", ( ) => this.openSub( true ) );
+			this.addDOMEvent( "click", ( ) => this.openSub( false ) );
+			this.addDOMEvent( "mouseleave", ( ) => this.closeSub() );
+			
+			this.menu.on( "opened", ( ) => this.addClass( "opened" ) );
+			this.menu.on( "closed", ( ) => this.removeClass( "opened" ) );
+		}
+		else {
+			this.addDOMEvent( "mouseenter", ( ) => { openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); } );
+			this.addDOMEvent( "click", ( ) => {
+				this.dismiss( false );
+				if( itm.click ) {
+					itm.click( new Event("click") );
+				}
+			} );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	dismiss( after: boolean ) {
+		const menu = this.parentElement( Menu );
+		if( menu ) {
+			menu.dismiss( after );
+		}
+	}
+
+
+	/**
+	 * 
+	 */
+
+	openSub( delayed: boolean ) {
+		const open = ( ) => {
+			this.dismiss( true );
+		
+			const rc = this.getBoundingRect( );
+			this.menu.displayAt( rc.right-4, rc.top );
+		}
+
+		if( delayed ) {
+			openTimer.setTimeout( "open", OPEN_DELAY, open );
+		}
+		else {
+			openTimer.clearTimeout( "open" );
+			open( );
+		}
+	}
+
+	closeSub( ) {
+		openTimer.clearTimeout( "open" );
+	}
+}
+
+/**
+ * 
+ */
+
+export class Menu extends Popup {
+	
+	constructor( props: MenuProps ) {
+		super( { ...props, autoClose: "menu", modal: false } );
+
+		this.addClass( "x4vbox" );
+
+		const children = props.items?.map( itm => {
+			if( itm==="-" ) {
+				return new CMenuSep( );
+			}
+			else if( isString(itm) ) {
+				return new CMenuItem( { text: itm, click: null, cls: 'title' } );
+			}
+			else if( itm instanceof Component ) {
+				return itm;
+			}
+			else {
+				return new CMenuItem( itm );
+			}
+		});
+
+		this.setContent( children );
+	}
+}
+

package/lib/src/components/messages/circle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

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

@@ -0,0 +1,47 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file messages.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 {
+	
+	--msgbox-caption-background: var( --alert-background );
+	--msgbox-caption-color: var( --alert-color );
+
+	--msgbox-icon-color:  var( --alert-background );
+}
+
+.x4messagebox {
+
+	& > .caption {
+		background-color: var( --msgbox-caption-background );
+
+		& > #title {
+			color: var( --msgbox-caption-color );
+		}
+	}
+
+	& .x4form {
+		.x4icon {
+			color: var( --msgbox-icon-color );
+			height: 96px;
+		}
+
+		.x4label {
+			padding: 16px;
+		}
+	}
+}
+
+

package/lib/src/components/messages/messages.ts

@@ -0,0 +1,64 @@
+
+// :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+import { _tr } from '@core/core_i18n';
+
+import { HBox } from '../boxes/boxes';
+import { Icon } from '../icon/icon';
+import { Label } from '../label/label';
+import { Dialog, DialogProps } from "../dialog/dialog"
+
+import "./messages.module.scss";
+
+import error_icon from "./circle-exclamation.svg";
+import { asap, UnsafeHtml } from '@core/core_tools.js';
+import { Form } from '../form/form.js';
+
+export interface MessageBoxProps extends DialogProps {
+	message: string;
+	click: (button: string) => void;
+}
+
+export class MessageBox extends Dialog<DialogProps>
+{
+	m_label: Label;
+
+	constructor(props: DialogProps) {
+		super(props);
+	}
+
+	setText(txt: string | UnsafeHtml ) {
+		this.m_label.setText( txt );
+	}
+
+	/**
+	 * display a messagebox
+	 */
+
+	static show( msg: string | UnsafeHtml ): MessageBox {
+
+		const box = new MessageBox({ 
+			modal: true,
+			title: _tr.global.error,
+			movable: true,
+			form: new Form( {
+				content: [
+					new HBox( {
+						content: [
+							new Icon( { iconId: error_icon }),
+							new Label( { text: msg } ),
+						]
+					}),
+				]
+			}),
+			buttons: ["ok","cancel"]
+		});
+	
+		box.on( "btnclick", ( ev ) => {
+			asap( ( ) => box.close() );
+		});
+
+		box.display();
+		return box;
+	}
+}

package/lib/src/components/normalize.scss

@@ -0,0 +1,386 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file normalize.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.
+ **/
+
+/* from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+	 ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+	margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+	display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+	 ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+	box-sizing: content-box; /* 1 */
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+	 ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+	background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+	border-bottom: none; /* 1 */
+	text-decoration: underline; /* 2 */
+	text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+	font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+	font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+  }
+  
+  sub {
+	bottom: -0.25em;
+  }
+  
+  sup {
+	top: -0.5em;
+  }
+  
+  /* Embedded content
+	 ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+	border-style: none;
+  }
+  
+  /* Forms
+	 ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+	overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+	text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+	-webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+	outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+	padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+	box-sizing: border-box; /* 1 */
+	color: inherit; /* 2 */
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 3 */
+	white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+	vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+	overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+	height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+	 ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+	display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+	display: list-item;
+  }
+  
+  /* Misc
+	 ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+	display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+	display: none;
+  }
+  
+ 
+ :root {
+	--font-name: "montserrat";
+	--font-size: 14px;
+}
+
+* {
+	user-select: none;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: var( --font-name );
+	font-size: var( --font-size );
+}
+
+.x4hidden {
+	display: none !important;
+}
+

package/lib/src/components/notification/circle-check-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>

package/lib/src/components/notification/circle-exclamation-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

package/lib/src/components/notification/circle-notch-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M207.4 20.4c2.4 8.5-2.6 17.3-11.2 19.7C101.5 66.2 32 153 32 256c0 123.7 100.3 224 224 224s224-100.3 224-224c0-103-69.5-189.8-164.3-215.9c-8.5-2.4-13.5-11.2-11.2-19.7s11.2-13.5 19.7-11.2C432.5 39.1 512 138.2 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 138.2 79.5 39.1 187.7 9.2c8.5-2.4 17.3 2.6 19.7 11.2z"/></svg>