x4js 2.3.15 → 2.3.17

package/src/components/gauge/gauge.ts

@@ -59,6 +59,10 @@ export class Gauge extends Component<GaugeProps> {
 	constructor( props: GaugeProps ) {
 		super( props );
 
+		// no range given: 0 to 100
+		this.props.min = props.min ?? 0;
+		this.props.max = props.max ?? 100;
+
 		this.pos = 70;
 		this.stops = [];
 

package/src/components/input/input.ts

@@ -410,7 +410,12 @@ export class Input extends Component<InputProps,InputEvents> {
      */
 
 	public setNumValue( value: number, ndec = -1 ) {
-		
+
+		// no number (a field that is not filled): the field is emptied
+		if( value===undefined || value===null || isNaN( value ) ) {
+			return this.setValue( "" );
+		}
+
 		if( ndec==-2 && this.props.type=='number' ) {
 			const p = this.props as NumberProps;
 

package/src/components/notification/notification.module.scss

@@ -18,7 +18,11 @@
 
 :root {
 	--notification-border: var( --border );
-	--notification-background: white;
+	--notification-background: var( --background-primary );
+
+	--notification-title-color: var( --text-primary );
+	--notification-text-color: var( --text-ternary );
+	--notification-button-color: var( --text-ternary );
 
 	--notification-icon-default: var( --accent-background );
 	--notification-icon-success: var( --success-background );
@@ -54,11 +58,12 @@
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
+			color: var( --notification-title-color );
 		}
 
 		.text {
 			padding: 3px 6px 6px 6px;
-			color: var( --color-gray-7 );
+			color: var( --notification-text-color );
 		}
 	}
 
@@ -81,7 +86,7 @@
 
 	.x4button {
 		height: 24px;
-		color: var( --color-gray-7 );
+		color: var( --notification-button-color );
 		border: none;
 
 		//&:hover {

package/src/components/notification/notification.ts

@@ -52,6 +52,9 @@ interface NotificationProps extends ComponentProps {
  * ```
  * --notification-border
  * --notification-background
+ * --notification-title-color
+ * --notification-text-color
+ * --notification-button-color
  * --notification-icon-default
  * --notification-icon-success
  * --notification-icon-danger

package/src/components/progress/progress.ts

@@ -21,8 +21,8 @@ import "./progress.module.scss";
 
 interface ProgressProps extends ComponentProps {
 	value: number;
-	min: number;
-	max: number;
+	min?: number;	// 0 when missing
+	max?: number;	// 100 when missing
 }
 
 /**
@@ -46,7 +46,11 @@ export class Progress extends Component<ProgressProps> {
 	}
 
 	setValue( value: number ) {
-		const perc = value / (this.props.max-this.props.min) * 100;
+		const min = this.props.min ?? 0;
+		const max = this.props.max ?? 100;
+
+		// where the value is between the two: min is 0%, max is 100%
+		const perc = (value-min) / (max-min) * 100;
 		this._bar.setStyleValue( "width", perc+"%" );
 	}
 }

package/src/components/switch/switch.ts

@@ -28,6 +28,7 @@ interface SwitchProps extends ComponentProps {
 	label: string;
 	checked?: boolean;
 	value?: string;
+	name?: string;	// with it, a Form reads and writes the switch (a boolean)
 }
 
 /**
@@ -52,7 +53,7 @@ export class Switch extends HBox<SwitchProps> {
 			new Component( {
 				cls: "switch",
 				content: [
-					new Input( { type: "checkbox", id: inputId, checked: props.checked } ),
+					new Input( { type: "checkbox", id: inputId, name: props.name, checked: props.checked } ),
 					new Component( { cls: "track" } ),
 					new Component( { cls: "thumb" } ),
 				]

package/src/core/component.ts

@@ -1197,7 +1197,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 			// straight on the element, not with addDOMEvent: the handlers of the
 			// children are called exactly as before
-			this.dom.addEventListener( "keydown", ( ev: KeyboardEvent ) => shortcuts.handle( ev ) );
+			this.dom.addEventListener( "keydown", ( ev ) => shortcuts.handle( ev as KeyboardEvent ) );
 			this.dom.addEventListener( "focusin", ( ) => Application.instance( ).setActiveShortcuts( this, shortcuts ) );
 		}