x4js 2.3.24 → 2.3.26

package/src/components/settingsview/settingsview.ts

@@ -16,7 +16,6 @@
 
 import { Component, ComponentEvent, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns } from '../../core/core_tools';
 
 import { BoxProps, HBox, VBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -43,8 +42,8 @@ export interface SettingItemProps extends BoxProps {
  * together, put the items in a Form and give the controls a name.
  */
 
-@class_ns( "x4" )
 export class SettingItem extends VBox<SettingItemProps> {
+	static classPrefix = "x4";
 
 	constructor( props: SettingItemProps ) {
 		// the content goes under the name and the description, not in the box itself
@@ -112,13 +111,14 @@ function normalize( text: string ) {
  * --settingsview-toc-width
  * --settingsview-section-background
  * --settingsview-section-title-background
+ * --settingsview-section-title-color
  * --settingsview-hover-background
  * --settingsview-marker
  * ```
  */
 
-@class_ns( "x4" )
 export class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P,SettingsViewEvents> {
+	static classPrefix = "x4";
 
 	// fields, not refs: refs belong to the classes that derive from this one
 	private _search: Input = null;

package/src/components/sizers/sizer.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '../../core/component';
-import { class_ns, Point } from '../../core/core_tools';
+import { Point } from '../../core/core_tools';
 
 import "./sizer.module.scss"
 
@@ -43,8 +43,8 @@ type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right"
  */
 
 
-@class_ns( "x4" )
 export class CSizer extends Component<ComponentProps,CSizerEvent> {
+	static classPrefix = "x4";
 
 	private _type: SizerType;
 	private _ref: Component;
@@ -98,6 +98,15 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this._ref = null;
 		});
 
+		// cancelled by the browser (a touch taken by a scroll, a gesture...): no pointerup will
+		// come, the moves after are not a resize. The browser releases the capture itself
+		this.addDOMEvent( "pointercancel", ( ) => {
+			if( this._ref ) {
+				this.fire( "stop", { })
+				this._ref = null;
+			}
+		});
+
 		this.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
 			this._onMouseMove( e );
 		});
@@ -153,36 +162,17 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			size = nr.width = (pt.x-rc.left);
 		}
 
-		const isFlex = ( c : Component ) => {
-			if( !c ) {
-				return false;
-			}
-
-			if( c.hasClass( "x4flex" ) ) {
-				return true;
-			}
-
-			return c.getStyleValue( "flexGrow" )!==undefined;
-		}
-
-		if( this._type.includes("-prev") ) {
-			if(  isFlex(this.prevElement() ) ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+		// between two boxes: the neighbour sized by the basis of its flex; without a neighbour
+		// (the sizer first or last in its box), the box itself by its size
+		if( this._type.includes("-prev") || this._type.includes("-next") ) {
+			const neighbour = this._type.includes("-prev") ? this.prevElement( ) : this.nextElement( );
+			if( neighbour ) {
+				this._ref.setStyleValue( "flex", `0 0 ${size}px` );
 			}
 			else {
 				this._ref.setStyle( nr );
 			}
 		}
-		else if( this._type.includes("-next") ) {
-			if(  isFlex(this.nextElement() ) ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
-			}
-			else {
-				this._ref.setStyle( nr );
-			}
-
-			return;
-		}
 		else {
 			this._ref.setStyle( nr );
 		}
@@ -195,15 +185,17 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 	}
 }
 
-@class_ns( "x4" )
 export class HSizer extends CSizer {
+	static classPrefix = "x4";
+
 	constructor( next = true ) {
 		super( next ? "hsize-next" : "hsize-prev" );
 	}
 }
 
-@class_ns( "x4" )
 export class VSizer extends CSizer {
+	static classPrefix = "x4";
+
 	constructor( next = true ) {
 		super( next ? "vsize-next" : "vsize-prev" );
 	}

package/src/components/slider/slider.ts

@@ -16,7 +16,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -49,8 +49,8 @@ interface SliderProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Slider extends Component<SliderProps,SliderEvents> {
+	static classPrefix = "x4";
 
 	private _mdown = false;
 	private _irect: Rect = null;

package/src/components/spreadsheet/spreadsheet.ts

@@ -18,7 +18,7 @@
 import { Component, ComponentContent, ComponentEvent, ComponentEvents, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { GridColumn } from '../gridview/gridview'
 
-import { class_ns, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
+import { formatDate, formatMoney, formatNumber, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
 import { CoreEvent, EventCallback, EventMap } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -282,8 +282,8 @@ export interface SpreadsheetProps extends ComponentProps {
  * ```
  */
 
-@class_ns("x4")
 export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extends SpreadsheetEvents = SpreadsheetEvents> extends Component<P, E> {
+	static classPrefix = "x4";
 
 	private _columns: SpreadsheetColumn[];
 	private _store: Store;
@@ -310,9 +310,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 	private _end: number;
 
 	private _selection: Set<number>;
-	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 _has_fixed: boolean;
 	private _has_footer: boolean;
@@ -821,12 +818,13 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			})
 
 			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();
@@ -990,7 +988,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._num_fmt.format(data as number);
+				data = formatNumber(data as number);
 				break;
 			}
 
@@ -999,7 +997,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._mny_fmt.format(data as number);
+				data = formatMoney(data as number);
 				break;
 			}
 
@@ -1015,7 +1013,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 
 			case "date": {
-				data = this._dte_fmt.format(data as Date);
+				data = formatDate(data as Date);
 				break;
 			}
 

package/src/components/switch/switch.ts

@@ -22,7 +22,6 @@ import { Label } from '../label/label';
 import { HBox } from '../boxes/boxes';
 
 import "./switch.module.scss";
-import { class_ns } from '../../core/core_tools';
 
 interface SwitchProps extends ComponentProps {
 	label: string;
@@ -43,8 +42,9 @@ interface SwitchProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Switch extends HBox<SwitchProps> {
+	static classPrefix = "x4";
+
 	constructor(props: SwitchProps ) {
 		super( props );
 

package/src/components/tabs/tabs.ts

@@ -20,7 +20,6 @@ import { Button, ButtonProps } from '../button/button';
 import { HBox, VBox, StackBox, Box } from '../boxes/boxes';
 
 import "./tabs.module.scss"
-import { class_ns } from '../../core/core_tools';
 
 /**
  * 
@@ -40,8 +39,9 @@ export interface TabItem {
  * 
  */
 
-@class_ns( "x4" )
 class CTab extends Button {
+	static classPrefix = "x4";
+
 	constructor( props: ButtonProps, item: TabItem ) {
 		super( props );
 
@@ -78,8 +78,8 @@ interface TablistEvents extends ComponentEvents {
  * @internal
  */
 
-@class_ns( "x4" )
 class CTabList extends HBox<TablistProps,TablistEvents> {
+	static classPrefix = "x4";
 
 	private _selitem: Button;
 	
@@ -152,8 +152,8 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tabs extends Box<TabsProps> {
+	static classPrefix = "x4";
 
 	private _list: CTabList;
 	private _stack: StackBox;

package/src/components/tag/tag.ts

@@ -16,7 +16,7 @@
 
 
 import { ComponentProps } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 import { HBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 import { SimpleText } from '../label/label';
@@ -40,8 +40,8 @@ export interface TagProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tag extends HBox<TagProps> {
+	static classPrefix = "x4";
 
 	constructor( props: TagProps ) {
 		super( props );

package/src/components/textarea/textarea.ts

@@ -23,7 +23,7 @@ import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
 
 import "./textarea.module.scss";
-import { class_ns, IFormElement } from '../../core/core_tools';
+import { IFormElement } from '../../core/core_tools';
 
 /**
  * 
@@ -50,8 +50,8 @@ export interface TextAreaEvents extends ComponentEvents {
  *
  */
 
-@class_ns( "x4" )
 export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: SimpleTextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
@@ -142,8 +142,8 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * ```
  */
 
-@class_ns( "x4" )
 export class TextArea extends VBox {
+	static classPrefix = "x4";
 	
 	private _input: SimpleTextArea;
 

package/src/components/textedit/textedit.ts

@@ -16,7 +16,7 @@
 
 //import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, makeUniqueComponentId } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 import { BoxProps, HBox } from '../boxes/boxes';
 import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
@@ -81,8 +81,8 @@ interface TextEditProps extends InputProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<BoxProps,E> {
+	static classPrefix = "x4";
 
 	private input: Input;
 

package/src/components/themes.scss

@@ -92,9 +92,11 @@ $color--interval: 8.4%;
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
+	--alert-background-light: color-mix(in srgb, var(--alert-background) 15%, transparent);		// the red at 15%
 	--alert-color: #ffffff;
 
 	--warning-background: var(--color-warning-a50);
+	--warning-background-light: color-mix(in srgb, var(--warning-background) 15%, transparent);	// the orange at 15%
 	--warning-color: #ffffff;
 
 	--success-background: var(--color-success-a50);

package/src/components/tickline/tickline.ts

@@ -3,7 +3,7 @@ import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./tickline.module.scss"
-import { class_ns } from '../../core/core_tools';
+import { formatNumber } from '../../core/core_tools';
 
 export interface TickLineProps extends ComponentProps {
 	values: number[];
@@ -31,8 +31,8 @@ export interface TickLineProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class TickLine extends Component<TickLineProps> {
+	static classPrefix = "x4";
 	
 	constructor( props: TickLineProps ) {
 		super( props );
@@ -102,7 +102,7 @@ export class TickLine extends Component<TickLineProps> {
                     .antiAlias( false );
 
                 if( props.display?.tooltips ) {
-                    r.setAttr( 'tooltip', vals[x].toFixed(1) )
+                    r.setAttr( 'tooltip', formatNumber( vals[x], 1 ) )
                 }
 			}
 		}

package/src/components/tooltips/tooltips.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, wrapDOM } from '../../core/component';
-import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
+import { ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Popup, PopupProps } from '../popup/popup';
@@ -32,6 +32,15 @@ let mouse_pos: Point = {x:0, y:0 };
 
 const timer = new Timer( );
 
+/**
+ * the tooltips are shown once this is called: the text of the attribute "tooltip" (the prop
+ * tooltip of a component), or the one getTip( ) of a "tip-handler" gives.
+ * This text is shown as html: a text that comes from a user is escaped by the application,
+ * with sanitizeHtml( text ).
+ * @example
+ * new Button( { label: "Open", tooltip: `Open <b>${sanitizeHtml( file.name )}</b>` } );
+ */
+
 export function initTooltips( ) {
 
 	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {
@@ -108,8 +117,8 @@ function closeTT( ) {
  * ```
  */
 
-@class_ns( "x4" )
 class Tooltip extends Popup {
+	static classPrefix = "x4";
 
 	constructor( props: PopupProps ) {
 		super( props );

package/src/components/treeview/treeview.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns } from '../../core/core_tools';
+import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 
@@ -84,8 +84,8 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 class CTreeViewItem extends Box {
+	static classPrefix = "x4";
 
 	private _item: TreeItem;
 	private _label: Component;
@@ -187,8 +187,8 @@ class CTreeViewItem extends Box {
  * 
  */
 
-@class_ns( "x4" )
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+	static classPrefix = "x4";
 
 	private _view: Viewport;
 	private _selection: ListboxID;

package/src/components/video/video.ts

@@ -15,7 +15,6 @@
  **/
 
 import { Component, ComponentProps } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 import { Box } from '../boxes/boxes';
 
 import "./video.module.scss"
@@ -31,8 +30,8 @@ interface VideoProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Video extends Box {
+	static classPrefix = "x4";
 	
 	private _vplayer: HTMLVideoElement;
 

package/src/components/viewport/viewport.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 "./viewport.module.scss"
@@ -24,8 +23,9 @@ import { Box, BoxProps } from '../components';
  * 
  */
 
-@class_ns( "x4" )
 export class Viewport extends Component {
+	static classPrefix = "x4";
+
 	constructor( props: ComponentProps ) {
 		super( props );
 	}
@@ -35,8 +35,9 @@ export class Viewport extends Component {
  * 
  */
 
-@class_ns( "x4" )
 export class ScrollView extends Box {
+	static classPrefix = "x4";
+
 	constructor( props: BoxProps ) {
 		super( props );
 		this.setContent( new Viewport( {} ) );

package/src/core/component.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor } from './core_tools';
 import { CoreElement } from './core_element';
 import { AriaAttributes, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
@@ -31,17 +31,19 @@ const FRAGMENT = Symbol( "fragment" );
 const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
 /**
- * you can change css classname prefix by adding
+ * the css classes of a component: the name of each class of its chain, in lower case, after
+ * the prefix that class declares itself (not the one of its parent):
  *
  *  ```
- * static "$cls-ns" = "<your prefix>";
+ * static classPrefix = "<your prefix>";
  * ```
- * 
- * to your class to avoid autogenerated css class names conflicts
+ *
+ * every component of x4 declares "x4" (x4button...); the classes of an application have
+ * none unless they declare one
  */
 
 function genClassNames( x: any ): string[] {
-	
+
 	let self = Object.getPrototypeOf(x);
 	if( self.constructor==Component ) {
 		return ["x4-comp","x4"];
@@ -50,8 +52,8 @@ function genClassNames( x: any ): string[] {
     const classes = [];
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
-		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
-		classes.push( clsns+clsname.toLowerCase() );
+		const prefix: string = Object.prototype.hasOwnProperty.call(self.constructor,"classPrefix") ? self.constructor.classPrefix :  "";
+		classes.push( prefix+clsname.toLowerCase() );
 		self = Object.getPrototypeOf(self);
 	}
 
@@ -156,9 +158,9 @@ export interface ComponentEvents extends EventMap {
  * ```
  */
 
-@class_ns("x4")
 export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
 		extends CoreElement<E> {
+	static classPrefix = "x4";
 
 	/** The underlying DOM element of the component. */
     readonly dom: Element;
@@ -907,19 +909,6 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		this.setAttribute( "disabled", !ena ? 'true' : null );
 		this.setAttribute( "inert", !ena ? 'true' : null );
 
-		/*
-		boxes are now fieldset, this is native
-		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
-			this.dom.disabled = !ena;
-		}
-
-		// propagate enable state to all input children
-		const nodes = this.enumChildComponents( true );
-		nodes.forEach( x => {
-			x.enable( ena );
-		});
-		*/
-
 		return this;
 	}
 
@@ -1294,8 +1283,9 @@ export function wrapDOM( el: HTMLElement ): Component {
  * Automatically generates CSS class: `x4flex`.
  */
 
-@class_ns( "x4" )
 export class Flex extends Component {
+	static classPrefix = "x4";
+
 	constructor( ) {
 		super({})
 	}
@@ -1311,8 +1301,9 @@ export class Flex extends Component {
  * ```
  */
 
-@class_ns( "x4" )
 export class Space extends Component {
+	static classPrefix = "x4";
+
 	constructor( width?: number|string, cls?: string ) {
 		super( { width, cls } )
 	}

package/src/core/core_application.ts

@@ -19,6 +19,7 @@ import { CoreElement } from './core_element';
 import { CoreEvent, EventMap } from './core_events';
 import { asap, getFocusableElements, ITabHandler } from './core_tools';
 import { Shortcuts, ShortcutCallback, ShortcutOptions } from './core_shortcuts';
+import { _setLocale, getCurrentLocale, getCurrentCurrency } from './core_i18n';
 
 const socket_sent = Symbol( 'socket' );
 
@@ -249,13 +250,44 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	}
 
 	/**
-	 * 
+	 * Forces the locale of the formats of numbers, amounts and dates (formatNumber, formatMoney,
+	 * formatDate, formatDateTime), and the currency of the amounts. Without it, the locale is the one of the language (`_tr.global.locale`: "fr-FR"
+	 * for fr, "en-US" for en...) and the currency "EUR".
+	 * A field of type number is shown by the browser, in its own locale, whatever this one.
+	 * @param locale - "fr-CH", "en-GB"...; null: the one of the language again
+	 * @param currency - "CHF", "USD"...; not given: the currency does not change
+	 * @example
+	 * Application.setLocale( "fr-CH", "CHF" );
+	 */
+
+	static setLocale( locale: string, currency?: string ) {
+		_setLocale( locale, currency );
+	}
+
+	/** The locale of the formats: the one forced by setLocale, else the one of the language. */
+
+	static getLocale( ): string {
+		return getCurrentLocale( );
+	}
+
+	/** The currency of the amounts: "EUR" unless setLocale gave another. */
+
+	static getCurrency( ): string {
+		return getCurrentCurrency( );
+	}
+
+	/**
+	 *
 	 */
 
 	private _setupKeyboard( ) {
 		
 		document.addEventListener( "keydown", (ev) => {
-			if( ev.key=="Tab" || ev.key=="Enter" ) {
+			// Enter in a text of several lines is a new line, not the next field
+			const target = ev.target as HTMLElement;
+			const multiline = target.tagName==="TEXTAREA" || target.isContentEditable;
+
+			if( ev.key=="Tab" || ( ev.key=="Enter" && !multiline ) ) {
 				if( this.focusNext( !ev.shiftKey ) ) {
 					ev.preventDefault( );
 				}
@@ -263,7 +295,8 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 
 			// The focus is nowhere: the shortcuts of the view the user worked in last.
 			// (when it is in a view, the view has seen the key before us)
-			if( ev.target===document.body && this._active?.owner.dom.isConnected && this._active.shortcuts.handle( ev ) ) {
+			// (a view hidden, in a tab not shown: its shortcuts sleep)
+			if( ev.target===document.body && this._active?.owner.isVisible( ) && this._active.shortcuts.handle( ev ) ) {
 				return;
 			}