x4js 2.3.25 → 2.3.26

package/src/components/gauge/gauge.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { centerRect, class_ns } from '../../core/core_tools';
+import { centerRect } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component'
 import { SvgBuilder, SvgComponent } from '../../core/core_svg';
 
@@ -49,8 +49,8 @@ export const simpleColorStop = [
  * ```
  */
 
-@class_ns( "x4" )
 export class Gauge extends Component<GaugeProps> {
+	static classPrefix = "x4";
 
 	private pos: number;
 	private stops: string[];

package/src/components/gridview/gridview.module.scss

@@ -22,6 +22,7 @@
 	
 	--gridview-header-cell-background: var( --background-primary );
 	--gridview-header-cell-color: var( --text-primary );
+	--gridview-header-sort-color: var( --gridview-header-cell-color );	// the arrow of the column sorted
 	--gridview-header-cell-vline: var( --border );
 	--gridview-header-cell-border: var( --border );
 
@@ -245,17 +246,19 @@
 				width: 1em;
 			}
 
+			// the arrow is the mask of the box: its colour follows the theme
 			&.sorted .sorter {
-				background-image: url("./arrow-down-light.svg");
 				display: block;
 				width: 20px;
 				height: 0.7em;
-				background-repeat: no-repeat;
-				background-position: 50% 50%;
+				background-color: var( --gridview-header-sort-color );
+				-webkit-mask: url("./arrow-down-light.svg") no-repeat 50% 50% / contain;
+				mask: url("./arrow-down-light.svg") no-repeat 50% 50% / contain;
 			}
-			
+
 			&.sorted.desc .sorter {
-				background-image: url("./arrow-up-light.svg");
+				-webkit-mask-image: url("./arrow-up-light.svg");
+				mask-image: url("./arrow-up-light.svg");
 			}
 			
 			.x-c-sizer:hover {

package/src/components/gridview/gridview.ts

@@ -16,7 +16,7 @@
 
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
-import { class_ns, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
+import { formatDate, formatDateTime, formatMoney, formatNumber, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
 import { DataModel, DataStore, DataView, DataRecord, EvViewChange, SortCallback } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
@@ -108,6 +108,7 @@ export interface GridviewProps extends ComponentProps {
  * --gridview-border
  * --gridview-header-cell-background
  * --gridview-header-cell-color
+ * --gridview-header-sort-color
  * --gridview-header-cell-vline
  * --gridview-header-cell-border
  * --grid-check-background
@@ -132,8 +133,8 @@ export interface GridviewProps extends ComponentProps {
  * ```
  */
 
-@class_ns("x4")
 export class Gridview<P extends GridviewProps = GridviewProps, E extends GridviewEvents = GridviewEvents> extends Component<P,E> {
+	static classPrefix = "x4";
 
 	private _dataview: DataView;
 	private _datamodel: DataModel;
@@ -165,10 +166,6 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	
 
 	// TODO: that
-	private _num_fmt 	= new Intl.NumberFormat('fr-FR');
-	private _mny_fmt 	= new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
-	private _dte_fmt 	= new Intl.DateTimeFormat('fr-FR', {});
-	private _dtetme_fmt = new Intl.DateTimeFormat('fr-FR', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:"2-digit"});
 
 	private _has_fixed: boolean;
 	private _has_footer: boolean;
@@ -744,12 +741,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			})
 
 			sizer.on("resize", (ev) => {
-				cdata.width = ev.size;
+				const size = Math.max( ev.size, 16 );		// 16px at least: the min-width of a .cell
+				cdata.width = size;
 				cdata.flex  = 0;
-				
+
 				const cols = this.queryAll(`[data-col="${col}"]`)
 				cols.forEach(c => {
-					c.setStyleValue("width", ev.size + "px");
+					c.setStyleValue("width", size + "px");
 				});
 
 				const rh = header.getBoundingRect();
@@ -1005,7 +1003,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					return "NaN";
 				}
 
-				data = this._num_fmt.format(data as number);
+				data = formatNumber(data as number);
 				break;
 			}
 
@@ -1014,7 +1012,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					return "NaN";
 				}
 
-				data = this._mny_fmt.format(data as number);
+				data = formatMoney(data as number);
 				break;
 			}
 
@@ -1034,7 +1032,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					data = new Date( data );
 				}
 				
-				data = this._dte_fmt.format(data as Date);
+				data = formatDate(data as Date);
 				break;
 			}
 
@@ -1043,7 +1041,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					data = new Date( data );
 				}
 				
-				data = this._dtetme_fmt.format(data as Date);
+				data = formatDateTime(data as Date);
 				break;
 			}
 

package/src/components/header/header.ts

@@ -1,4 +1,4 @@
-import { class_ns, getScrollbarSize } from '../../core/core_tools';
+import { getScrollbarSize } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -36,8 +36,8 @@ const MAX_COLS = 10;	// columns with a default name (ref-c1...ref-c10) handled b
  * ```
  */
 
-@class_ns( "x4" )
 export class Header extends HBox<HeaderProps> {
+	static classPrefix = "x4";
 
 	private _els: Component[];
 	private _vwp: Component;

package/src/components/icon/icon.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./icon.module.scss"
@@ -111,8 +110,8 @@ export interface IconProps extends ComponentProps {
  * The CSS class for this component is automatically generated as `x4icon`.
  */
 
-@class_ns( "x4" )
 export class Icon extends Component<IconProps> {
+	static classPrefix = "x4";
 
 	/**
 	 * Create a new Icon.

package/src/components/image/image.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback, CoreEvent } from '../../core/core_events';
 import { dragManager } from '../../core/core_dragdrop';
@@ -56,8 +55,8 @@ export interface ImageProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
+	static classPrefix = "x4";
 
 	private _img: Component;
 

package/src/components/input/input.ts

@@ -16,7 +16,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
-import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
+import { formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
 
 import "./input.module.scss"
 
@@ -214,8 +214,9 @@ interface InputEvents extends ComponentEvent {
  * ```
  */
 
-@class_ns( "x4" )
 export class Input extends Component<InputProps,InputEvents> {
+	static classPrefix = "x4";
+
 	constructor( props: InputProps ) {
 		super( { tag: "input", ...props } );
 

package/src/components/keyboard/keyboard.ts

@@ -19,7 +19,6 @@ import { Box, BoxProps, Button, HBox, VBox } from '../components';
 import { _tr } from '../../core/core_i18n';
 
 import "./keyboard.module.scss"
-import { class_ns } from '../../core/core_tools';
 import { Application } from '../../core/core_application';
 
 import icon_bksp from "./delete-left.svg";
@@ -275,9 +274,10 @@ interface KeyboardProps extends BoxProps {
  * --keyboard-zoom
  * ```
  */
-@class_ns( "x4" )
 export class Keyboard extends HBox<KeyboardProps>
 {
+	static classPrefix = "x4";
+
 	mode: KbMode;
 	upper: boolean;
 	locale: string;

package/src/components/label/label.ts

@@ -18,7 +18,7 @@ import { Component, ComponentProps } from "../../core/component"
 import { Icon } from "../icon/icon"
 
 import "./label.module.scss";
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 export interface LabelProps extends ComponentProps {
 	text?: string | UnsafeHtml;
@@ -37,8 +37,8 @@ export interface LabelProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Label extends Component<LabelProps> {
+	static classPrefix = "x4";
 	
 	constructor( p: LabelProps ) {
 		super( { ...p, content: null } );
@@ -79,8 +79,8 @@ export interface SimpleTextProps extends ComponentProps {
 	align?: "left" | "center" | "right";
 }
 
-@class_ns( "x4" )
 export class SimpleText extends Component<SimpleTextProps> {
+	static classPrefix = "x4";
 	
 	/**
 	 * 

package/src/components/link/link.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents, ComponentProps, EvClick } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 import { Label } from '../label/label';
 
 import "./link.module.scss"
@@ -45,8 +45,9 @@ interface LinkProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Link extends Component<LinkProps,LinkEvents> {
+	static classPrefix = "x4";
+
 	constructor( props: LinkProps ) {
 		super( { tag: "a", ...props} );
 

package/src/components/listbox/listbox.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { kbNav, class_ns, isArray, UnsafeHtml, asap } from '../../core/core_tools';
+import { kbNav, isArray, UnsafeHtml, asap } from '../../core/core_tools';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Header } from '../header/header';
@@ -118,8 +118,8 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Listbox extends Component<ListboxProps,ListboxEvents> {
+	static classPrefix = "x4";
 
 private _view: Viewport;
 	private _lastsel: ListboxID;

package/src/components/menu/menu.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
-import { Timer, UnsafeHtml, class_ns, isFunction, isString } from '../../core/core_tools';
+import { Timer, UnsafeHtml, isFunction, isString } from '../../core/core_tools';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
@@ -59,8 +59,9 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 class CMenuSep extends Component {
+	static classPrefix = "x4";
+
 	constructor( ) {
 		super( { } );
 	}
@@ -73,8 +74,8 @@ const openTimer = new Timer( );
  * 
  */
 
-@class_ns( "x4" )
 class CMenuItem extends Component {
+	static classPrefix = "x4";
 
 	private menu: Menu;
 	
@@ -164,8 +165,8 @@ class CMenuItem extends Component {
  * 
  */
 
-@class_ns( "x4" )
 export class Menu extends Popup {
+	static classPrefix = "x4";
 	
 	constructor( props: MenuProps ) {
 		super( { ...props, autoClose: "menu" } );

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

@@ -25,8 +25,10 @@
 	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
 	--msgbox-log-border: var( --border );
 	--msgbox-log-border-focus: var( --border-focus );
-	--msgbox-log-error-color: var( --alert-background );
+	--msgbox-log-error-color: var( --alert-background );			// the text and the bar of an error
+	--msgbox-log-error-background: var( --alert-background-light );
 	--msgbox-log-warning-color: var( --warning-background );
+	--msgbox-log-warning-background: var( --warning-background-light );
 	--msgbox-log-scrollbar: var( --border-hover );		// the thumb; the track is the background of the lines
 }
 
@@ -158,9 +160,10 @@
 			margin: 0 6px 0 16px;
 		}
 
-		// the lines: a <pre>, 10 lines high at least; its text gives it no size (contain): it
-		// scrolls, the box does not grow; a line is not wrapped. An error, a warning: their
-		// icon, their colour
+		// the lines: a <pre> in a fixed font, 10 lines high at least; its text gives it no size
+		// (contain): it scrolls, the box does not grow; a line is not wrapped. Each line is a
+		// <div>, all of them as wide as the longest one (the column of the grid): an error, a
+		// warning, coloured on all their width, a bar on their left
 		#sub-text {
 			flex-grow: 1;
 			min-height: calc( 10lh + 10px );	// its padding and its border too
@@ -168,15 +171,35 @@
 			overflow: auto;
 			white-space: pre;
 			contain: size;
+			display: grid;
+			grid-template-columns: minmax( max-content, 1fr );
+			align-content: start;
 			font: inherit;
+			font-family: monospace, monospace;
 			line-height: 1.3em;
 			scrollbar-color: var( --msgbox-log-scrollbar ) transparent;
 			outline: none;
 			border: 1px solid var( --msgbox-log-border );
 			background-color: var( --msgbox-log-background );
-			padding: 4px 8px;
+			padding: 4px 0;
 			margin: 0 6px 0 16px;
 
+			.line {
+				min-height: 1lh;		// an empty line too
+				padding: 0 8px;
+				border-left: 3px solid transparent;
+
+				&.error {
+					background-color: var( --msgbox-log-error-background );
+					border-left-color: var( --msgbox-log-error-color );
+				}
+
+				&.warning {
+					background-color: var( --msgbox-log-warning-background );
+					border-left-color: var( --msgbox-log-warning-color );
+				}
+			}
+
 			&, * {
 				user-select: text;
 			}
@@ -207,6 +230,7 @@
 
 			summary {
 				margin-left: -1em;
+				padding-left: 11px;		// as the text of a line: its padding and its bar
 				cursor: pointer;
 				font-weight: bold;
 			}

package/src/components/messages/messages.ts

@@ -2,7 +2,7 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
+import { asap, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
@@ -41,16 +41,19 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-log-border
  * --msgbox-log-border-focus
  * --msgbox-log-error-color
+ * --msgbox-log-error-background
  * --msgbox-log-warning-color
+ * --msgbox-log-warning-background
  * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
  * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
  */
 
-@class_ns( "x4" )
 export class MessageBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -139,9 +142,10 @@ interface InputOptions {
 	trim?: boolean;
 }
 
-@class_ns( "x4" )
 export class InputBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -208,9 +212,10 @@ export class InputBox extends Dialog<DialogProps>
 // :: PROMPT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 
-@class_ns( "x4" )
 export class PromptBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -284,21 +289,21 @@ export class PromptBox extends Dialog<DialogProps>
 
 /**
  * a modal box that follows a long task: a title, a bar, and the lines of what is done
- * in a <pre>: a string is text, an UnsafeHtml is html. An error, a warning have their
- * icon and their colour. addSection puts the lines that follow in a section that folds.
- * Ctrl+A selects the lines.
+ * in a <pre>, in a fixed font, a <div> each: a string is text, an UnsafeHtml is html. An
+ * error, a warning are coloured on all their width, a bar on their left. addSection puts
+ * the lines that follow in a section that folds. Ctrl+A selects the lines.
  * done( ) shows its button OK: after an error or a warning it waits for it, their counts
  * on the left of the bar; else it closes the box after 5s, the seconds left in the button.
  */
 
-@class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
+	static classPrefix = "x4";
 
 	// an error or a warning: done( ) waits for OK
-	#errors = 0;
-	#warnings = 0;
+	private _errors = 0;
+	private _warnings = 0;
 
-	#section: Component;		// the last section (a <details>): the lines go in it
+	private _section: Component;		// the last section (a <details>): the lines go in it
 
 	constructor( title: string ) {
 		super( { 
@@ -348,7 +353,7 @@ export class ProgressionBox  extends Dialog {
 		this.query<Progress>( "#prog").setValue( perc );
 		this.addClass( "error" );		// the title bar in red, as the one of an error of MessageBox
 
-		this.#errors++;
+		this._errors++;
 	}
 
 	/** a line at the end, with the icon of a warning: done( ) then waits for the button OK */
@@ -357,7 +362,7 @@ export class ProgressionBox  extends Dialog {
 		this._addLine( text, "warning" );
 		this.query<Progress>( "#prog").setValue( perc );
 
-		this.#warnings++;
+		this._warnings++;
 	}
 
 	/**
@@ -369,10 +374,10 @@ export class ProgressionBox  extends Dialog {
 		const summary = new Component( { tag: "summary", content: new Component( { tag: "span", cls: "alert" } ) } );
 		summary.appendContent( title );
 
-		this.#section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
+		this._section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
 
 		const log = this.query( "#sub-text" );
-		log.appendContent( this.#section );
+		log.appendContent( this._section );
 		log.dom.scrollTop = log.dom.scrollHeight;
 		this.query<Progress>( "#prog").setValue( perc );
 	}
@@ -380,7 +385,7 @@ export class ProgressionBox  extends Dialog {
 	/** the text in place of all the lines */
 
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.#section = null;
+		this._section = null;
 		this.query( "#sub-text" ).setContent( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
@@ -388,44 +393,31 @@ export class ProgressionBox  extends Dialog {
 	/** as at the start: no line, no error, no button OK */
 
 	clear( ) {
-		this.#errors = 0;
-		this.#warnings = 0;
+		this._errors = 0;
+		this._warnings = 0;
 		this.clearInterval( "close" );
 		this.query( "#btnbar" ).show( false );
 		this.removeClass( "error" );
 		this.query<Label>( "#alerts" ).setText( "" );
 		this.query<Label>( "#alerts" ).setIcon( null );
-		this.#section = null;
+		this._section = null;
 		this.query( "#sub-text" ).clearContent( );
 	}
 
-	// the line after the others (in the last section), the last one shown; an error, a
-	// warning in a span of their class, their icon first
+	// the line after the others (in the last section), the last one shown: a <div>, of the
+	// class of its kind for an error, a warning
 	private _addLine( text: string | UnsafeHtml, kind?: "error" | "warning" ) {
 		const log = this.query( "#sub-text" );
-		const target = this.#section ?? log;
+		const target = this._section ?? log;
 
-		// after the summary of a section, its first line starts below it
-		if( target.dom.lastChild && target.dom.lastChild.nodeName!="SUMMARY" ) {
-			target.appendContent( "\n" );
-		}
+		target.appendContent( new Component( { cls: kind ? "line " + kind : "line", content: text } ) );
 
-		if( kind ) {
-			const icon = kind=="error" ? icons.danger : icons.warning;
-			const line = new Component( { tag: "span", cls: kind, content: unsafeHtml( icon ) } );
-			line.appendContent( text );
-			target.appendContent( line );
-
-			// the title of the section: the icon of the worst, in its colour
-			const alert = this.#section?.query( ".alert" );
-			if( alert && !alert.hasClass( "error" ) ) {
-				alert.setClass( "warning", kind=="warning" );
-				alert.setClass( "error", kind=="error" );
-				alert.setContent( unsafeHtml( icon ) );
-			}
-		}
-		else {
-			target.appendContent( text );
+		// the title of the section: the icon of the worst, in its colour
+		const alert = this._section?.query( ".alert" );
+		if( kind && alert && !alert.hasClass( "error" ) ) {
+			alert.setClass( "warning", kind=="warning" );
+			alert.setClass( "error", kind=="error" );
+			alert.setContent( unsafeHtml( kind=="error" ? icons.danger : icons.warning ) );
 		}
 
 		log.dom.scrollTop = log.dom.scrollHeight;
@@ -449,22 +441,22 @@ export class ProgressionBox  extends Dialog {
 		const ok = this.query<Button>( "#ok" );
 		this.query( "#btnbar" ).show( true );
 
-		if( this.#errors || this.#warnings ) {
+		if( this._errors || this._warnings ) {
 			const tr = _tr.global.progression;
 			const counts = [];
-			if( this.#errors ) {
-				counts.push( sprintf( this.#errors>1 ? tr.errors : tr.error, this.#errors ) );
+			if( this._errors ) {
+				counts.push( sprintf( this._errors>1 ? tr.errors : tr.error, this._errors ) );
 			}
-			if( this.#warnings ) {
-				counts.push( sprintf( this.#warnings>1 ? tr.warnings : tr.warning, this.#warnings ) );
+			if( this._warnings ) {
+				counts.push( sprintf( this._warnings>1 ? tr.warnings : tr.warning, this._warnings ) );
 			}
 
 			// on the left, the icon of the worst
 			const alerts = this.query<Label>( "#alerts" );
 			alerts.setText( counts.join( " / " ) );
-			alerts.setIcon( this.#errors ? icons.danger : icons.warning );
-			alerts.setClass( "error", this.#errors>0 );
-			alerts.setClass( "warning", this.#errors==0 );
+			alerts.setIcon( this._errors ? icons.danger : icons.warning );
+			alerts.setClass( "error", this._errors>0 );
+			alerts.setClass( "warning", this._errors==0 );
 
 			ok.setText( _tr.global.ok );
 			return;

package/src/components/notification/notification.ts

@@ -15,7 +15,7 @@
  **/
 
 import { ComponentProps } from '../../core/component';
-import { asap, class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
+import { asap, Rect, UnsafeHtml } from '../../core/core_tools';
 
 import { Popup } from '../popup/popup';
 import { HBox, VBox } from '../boxes/boxes';
@@ -61,8 +61,9 @@ interface NotificationProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Notification extends Popup {
+	static classPrefix = "x4";
+
 	private static list = new Set<Notification>( );
 
 	constructor( props: NotificationProps ) {

package/src/components/panel/panel.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentContent, ComponentProps } from '../../core/component';
-import { UnsafeHtml, Constructor, class_ns } from '../../core/core_tools';
+import { UnsafeHtml, Constructor } from '../../core/core_tools';
 
 import { VBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -37,8 +37,8 @@ interface PanelProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Panel extends VBox<PanelProps> {
+	static classPrefix = "x4";
 
 	private _title: Label;
 	private _body: Component;