x4js 2.3.24 → 2.3.26

package/src/components/button/button.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
-import { class_ns, isFunction, UnsafeHtml } from '../../core/core_tools';
+import { isFunction, UnsafeHtml } from '../../core/core_tools';
 
 import { Icon } from "../icon/icon"
 import { Menu, MenuElement } from '../menu/menu';
@@ -113,8 +113,8 @@ export interface ButtonProps extends ComponentProps {
  * the --ol-button-* variables are the ones of the outline buttons
  */
 
-@class_ns( "x4" )
 export class Button extends Component<ButtonProps,ButtonEvents> {
+	static classPrefix = "x4";
 
 	#text: Component;
 
@@ -134,6 +134,11 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	constructor( props: ButtonProps ) {
 		super( { ...props, tag: 'button', content: null } );
 
+		// a button, not a submit: in a <form>, Enter in a field would click the first submit
+		if( !props.attrs?.type ) {
+			this.setAttribute( "type", "button" );
+		}
+
 		this.mapPropEvents( props, 'click' );
 
 		if( props.autorepeat ) {

package/src/components/calendar/calendar.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvChange, Flex } from '../../core/component'
-import { class_ns, date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
+import { date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
 import { _tr } from '../../core/core_i18n';
 import { EventCallback } from '../../core/core_events';
 
@@ -70,9 +70,10 @@ interface CalendarProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 {
+	static classPrefix = "x4";
+
 	private m_date: Date;
 
 	constructor(props: CalendarProps) {
@@ -333,6 +334,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
  * /
 
 export class PopupCalendar extends Popup {
+	static classPrefix = "x4";
 
 	m_cal: Calendar;
 

package/src/components/canvas/canvas.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, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback } from "../../core/core_events"
 import { CanvasEx, createPainter } from './canvas_ex';
@@ -45,8 +44,8 @@ export interface CanvasProps extends ComponentProps {
  * Standard Canvas
  */
 
-@class_ns( "x4" )
 export class Canvas extends Component<CanvasProps, CanvasEventMap> {
+	static classPrefix = "x4";
 
 	private m_iwidth: number = -1;
 	private m_iheight: number = -1;

package/src/components/chart/chart.ts

@@ -17,7 +17,7 @@
 import { ComponentEvent, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { SvgBuilder, SvgComponent, SvgGroup, SvgPath, SvgProps, SvgShape } from '../../core/core_svg';
-import { class_ns, clamp, IRect, isNumber, sanitizeHtml } from '../../core/core_tools';
+import { clamp, formatNumber, IRect, isNumber, sanitizeHtml } from '../../core/core_tools';
 
 import "./chart.module.scss"
 
@@ -91,7 +91,7 @@ export function chartFormatUnit( value: number, decimals = 2 ) {
 
 	const pow = Math.pow(10, decimals);
 	const roundedValue = Math.round(scaledValue * pow) / pow;
-	const text = roundedValue % 1 == 0 ? `${roundedValue}` : roundedValue.toFixed(decimals).replace(/\.?0+$/, '');
+	const text = formatNumber( roundedValue, decimals );		// the decimal separator of the locale
 
 	return ( value<0 && roundedValue!=0 ? '-' : '' ) + text + units[unitIndex];
 }
@@ -234,8 +234,8 @@ function drawBar( grp: SvgGroup, x: number, w: number, y0: number, y1: number, r
  * ```
  */
 
-@class_ns( "x4" )
 export class Chart extends SvgComponent<ChartProps,ChartEvents> {
+	static classPrefix = "x4";
 
 	private _type: ChartType;
 	private _series: ChartSerie[];

package/src/components/checkbox/checkbox.ts

@@ -3,7 +3,6 @@ import { EventCallback } from '../../core/core_events';
 
 import { Input } from '../input/input';
 import { Label } from '../label/label';
-import { class_ns } from '../../core/core_tools';
 
 import icons from "../assets/icons";
 
@@ -45,8 +44,9 @@ interface CheckboxProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
+	static classPrefix = "x4";
+
 	readonly _input: Input;
 
 	/**

package/src/components/colorinput/colorinput.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { isFeatureAvailable, class_ns, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
+import { isFeatureAvailable, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
 import { Color } from '../../core/core_colors';
 
 import { BoxProps, HBox } from '../boxes/boxes';
@@ -84,8 +84,9 @@ interface ColorInputEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
+	static classPrefix = "x4";
+
 	static "$cls-ns" = "x4";
 
 	private _color: Color;				// null: no color

package/src/components/colorpicker/colorpicker.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Color, Hsv } from '../../core/core_colors';
-import { Rect, clamp, class_ns, isFeatureAvailable } from '../../core/core_tools';
+import { Rect, clamp, isFeatureAvailable } from '../../core/core_tools';
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
@@ -58,8 +58,8 @@ interface CommonEvents extends ComponentEvents {
  * 
  */
 
-@class_ns( "x4" )
 export class Saturation extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 
 	private mdown = false;
 	private irect: Rect;
@@ -191,8 +191,8 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
  * @internal
  */
 
-@class_ns( "x4" )
 class HueSlider extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 
 	private thumb: Component;
 	private hsv: Hsv = { hue: 1, saturation: 1, value: 1, alpha: 1 };
@@ -271,8 +271,8 @@ class HueSlider extends Box<BoxProps,CommonEvents> {
  * @internal
  */
 
-@class_ns( "x4" )
 class AlphaSlider extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 	
 	private thumb: Component;
 	private color: Component;
@@ -389,8 +389,8 @@ interface ColorPickerChangeEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
+	static classPrefix = "x4";
 
 	private _base: Color;
 	private _hsv: Hsv;

package/src/components/combobox/combobox.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvClick, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
@@ -42,8 +42,8 @@ interface DropdownProps extends Omit<PopupProps,"content"> {
 }
 
 
-@class_ns( "x4" )
 export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
+	static classPrefix = "x4";
 
 	private _list: Listbox;
 
@@ -108,8 +108,8 @@ interface ComboboxProps extends Omit<ComponentProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
+	static classPrefix = "x4";
 
 	private _popup: DropdownList;
 	//private _label: Label;

package/src/components/dialog/dialog.ts

@@ -20,7 +20,7 @@ import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { asap, class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
+import { asap, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
 import { ComponentEvent } from '../../core/component';
 import { Button } from '../button/button';
 import icons from "../assets/icons"
@@ -58,8 +58,8 @@ interface DialogEvents extends PopupEvents {
  * ```
  */
 
-@class_ns("x4")
 export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
+	static classPrefix = "x4";
 
 	private form: Form;
 	private _title: Label;
@@ -125,6 +125,12 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				}
 			}
 			else if (ev.key == 'Enter') {
+				// in a text of several lines Enter is a new line: Ctrl+Enter (Cmd+Enter) validates
+				const target = ev.target as HTMLElement;
+				if( ( target.tagName==="TEXTAREA" || target.isContentEditable ) && !ev.ctrlKey && !ev.metaKey ) {
+					return;
+				}
+
 				const def = this.query<Button>('button.default');
 				if (def) {
 					ev.preventDefault();

package/src/components/dockingview/dockingview.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, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { CSizer } from '../sizers/sizer';
@@ -185,8 +184,8 @@ interface Drag {
  * ```
  */
 
-@class_ns( "x4" )
 export class DockingView extends Component<DockingViewProps, DockingViewEvents> {
+	static classPrefix = "x4";
 
 	private layout: DockLayout;
 	private saved: { layout: DockLayout } = null;		// the state that remembers it

package/src/components/filedrop/filedrop.ts

@@ -18,7 +18,7 @@ import { Component, ComponentEvents, ComponentProps } from '../../core/component
 import { _tr } from '../../core/core_i18n';
 import { dragManager } from '../../core/core_dragdrop';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 import { VBox } from '../boxes/boxes';
 import { SimpleText } from '../label/label';
@@ -47,6 +47,7 @@ interface FileDialogProps extends ComponentProps {
  */
 
 export class FileDialog extends Component {
+	static classPrefix = "x4";
 
 	constructor( props: FileDialogProps ) {
 		super( { 
@@ -97,8 +98,8 @@ interface FileDropProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: FileDropProps ) {
 		super( props );

package/src/components/form/form.module.scss

@@ -31,8 +31,9 @@
         flex-direction: row;
     }
 
+	// flex: false: the height of its content (flex-grow alone would leave it at 0, flex-basis 0)
 	&.no-flex {
-		flex-grow: 0;
+		flex: none;
 	}
 }
 

package/src/components/form/form.ts

@@ -14,7 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns, IFormElement } from '../../core/core_tools';
+import { IFormElement } from '../../core/core_tools';
+import { ComponentEvents } from '../../core/component';
 import { Box, BoxProps } from '../boxes/boxes';
 
 import "./form.module.scss"
@@ -35,14 +36,17 @@ type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
  * ```
  */
 
-@class_ns( "x4" )
-export class Form<P extends FormProps = FormProps> extends Box<P> {
+export class Form<P extends FormProps = FormProps, E extends ComponentEvents = ComponentEvents> extends Box<P,E> {
+	static classPrefix = "x4";
 	
 	private validator: ValidationFn;
 
 	constructor( props: P ) {
 		super( { tag: "form", ...props } );
 
+		// read by getValues, never sent by the browser (Enter in its only field would send it)
+		this.addDOMEvent( "submit", ( ev ) => ev.preventDefault( ) );
+
 		if( props.flex===false ) {
 			this.addClass( "no-flex" );
 		}

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} );