x4js 2.3.21 → 2.3.22

package/aicontext.md

@@ -41,7 +41,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Flex, Space
   │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, TextEdit → AutoComplete, Breadcrumbs
-  │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea
+  │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea, SettingsView, SettingItem
   └── Application<E>           singleton, no DOM of its own
 
 EventSource<E>                 standalone event registry
@@ -1153,6 +1153,78 @@ class Form extends Box {
 
 ---
 
+## `SettingsView` — a page of settings, as the settings of VS Code
+
+The summary of the sections on the left, the sections on the right, one after the other, each a panel with its title on a band; in a section, each `SettingItem` with its name, what it does, then its controls. A click in the summary brings its section to the top; the summary follows the scroll and marks the section at the top of the view.
+
+```ts
+interface SettingItemProps extends BoxProps {
+  title: string
+  description?: string                     // under the name
+  content: Component | Component[]         // its controls, on a line that wraps
+}
+class SettingItem extends VBox {
+  getSearchText(): string                  // the title and the description: what a search looks in
+}
+// A SettingItem has no value of its own: its controls keep theirs. To read and write them together,
+// put the items in a Form (a section can hold a Form of SettingItem), give the controls a name,
+// and use getValues / setValues. The item is marked on its left while one of its controls has the focus.
+
+interface SettingsSection {
+  id: string
+  title: string
+  description?: string                     // under the title
+  content: Component[]                     // SettingItem, Form of SettingItem, or any component
+}
+interface SettingsViewProps extends BoxProps {
+  sections?: SettingsSection[]
+  searchable?: boolean                     // a search field above the sections
+  searchPlaceholder?: string               // _tr.global.settings.search when missing
+  noMatch?: string                         // shown when the search finds nothing; _tr.global.settings.nomatch when missing
+  sectionChange?: EventCallback<EvSectionChange>
+}
+interface EvSectionChange extends ComponentEvent { readonly section: string }   // the id of the section at the top
+class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P, SettingsViewEvents> {
+  setSections(sections: SettingsSection[]): void   // replaces the sections
+  showSection(id: string, smooth = true): void     // brings a section to the top
+  getSection(): string                             // the id of the section at the top
+}
+// Search: the words typed are looked for without case nor accents; an item is shown when its title or
+//   its description holds all of them. A section whose title or description holds them is shown whole;
+//   otherwise only its items that hold them, and what holds those items (a Form, a box). What holds no
+//   item (a table, a text) is shown with its whole section only. Escape empties the field.
+// The section marked in the summary is the last one whose top is above the top of the view (40px of
+//   margin); the first one while the view is hidden (in a tab not shown). The last section shown is at
+//   least as high as the view (class "last"): a click in the summary can bring any section to the top.
+// Classes: .x4settingsview > .search > .x4input, > .body > .toc (a Listbox), > .body > .sections;
+//   .section(.last) > .title, .description; .sections > .nomatch; .x4settingitem > .name, .description, .controls
+// CSS variables: --settingsview-toc-width, --settingsview-section-background,
+//   --settingsview-section-title-background, --settingsview-hover-background, --settingsview-marker
+```
+
+A page that builds its sections with references to its own components (`this.refs.x = ...`) cannot give them to `super()`: `this` is not there yet. It calls `setSections` after `super()`. `SettingsView` keeps its own parts in private fields, not in `refs`: `refs` is left to the classes that derive from it.
+
+```ts
+class MySettings extends SettingsView {
+  declare protected refs: { size: Input }
+
+  constructor(props: BoxProps) {
+    super({ ...props, searchable: true })
+
+    this.setSections([
+      { id: "editor", title: "Editor", content: [
+        new Form({ content: [
+          new SettingItem({ title: "Font size", description: "The size of the text, in pixels.",
+            content: this.refs.size = new Input({ type: "number", name: "fontSize", value: 14 }) }),
+        ] }),
+      ] },
+    ])
+  }
+}
+```
+
+---
+
 ## Sizers / viewport / misc
 
 ```ts
@@ -1184,7 +1256,10 @@ class ColorPicker extends VBox {           // props: color, swatches?, nullable?
 }
 class Panel extends VBox { setTitle(title: string): void }   // the text of its title: its icon stays
 class Breadcrumbs extends HBox { setItems(elements): void }
-interface KeyboardProps extends BoxProps { locale?: string }   // "fr-FR" (default), "de-CH", "pl"...
+interface KeyboardProps extends BoxProps {
+  locale?: string      // "fr-FR" (default), "de-CH", "pl"...
+  numpadOnly?: boolean    // number or date field: the pad has no "abc" key back to the letters
+}
 class Keyboard extends HBox {               // virtual keyboard, shown while an <input> has the focus
   setLocale(locale: string): void
   setZoom(perc: number): void
@@ -1192,6 +1267,7 @@ class Keyboard extends HBox {               // virtual keyboard, shown while an
 }
 // languages: cs da de en es et fi fr ga hr hu it lt lv mt nl pl pt ro sk sl sv
 // bottom row: 123 (numeric pad), the letters of the language (éè, none in en), the signs (#+=); Abc comes back
+// a key acts on pointerdown; the keys that draw the keyboard again (shift, 123, abc, accents, signs) on the click
 class TickLine extends Component
 class Header extends HBox                  // resizable column header; updates target style "--{name}-width"
 ```
@@ -1409,7 +1485,7 @@ dragManager.registerDropTarget(column, (cmd, el, infos) => {
 
 ## i18n (`core_i18n`)
 
-Two built-in languages (`fr` default, and `en`).
+Four built-in languages: `fr` (default), `en` (based on `fr`), `es` and `de` (based on `en`). Dates: `D/M/Y` in fr and es, `M/D/Y` in en, `D.M.Y` in de.
 
 ```ts
 export let _tr                             // current translation object (proxy)
@@ -1426,7 +1502,8 @@ isLanguage(name: string): boolean
 //   search search_tip required_field invalid_format invalid_email invalid_number invalid_date
 //   empty_list err_403 property value copy cut paste filedrop
 //   diff_date_seconds/minutes/hours, date_input_formats, date_format, date_time_format,
-//   day_short[] day_long[] month_short[] month_long[], keyboard.{next,numeric,alpha}
+//   day_short[] day_long[] month_short[] month_long[], keyboard.{next,numeric,alpha},
+//   settings.{search,nomatch}
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.21",
+  "version": "2.3.22",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/components.ts

@@ -35,6 +35,7 @@ export * from "./propgrid/propgrid"
 export * from "./radio/radio"
 export * from "./rating/rating"
 export * from "./select/select"
+export * from "./settingsview/settingsview"
 export * from "./sizers/sizer"
 export * from "./slider/slider"
 export * from "./spreadsheet/spreadsheet"

package/src/components/keyboard/keyboard.ts

@@ -239,6 +239,14 @@ function accentLabel( layout: KbLayout, upper: boolean ): string {
 	return ( upper ? upperKeys( label ) : label ).replace( " ", "" );
 }
 
+/**
+ * the keys that draw the keyboard again: shift, 123, abc, accents, signs
+ */
+
+function redrawKey( key: number ) {
+	return key==4 || key==5 || key==8 || key==10 || key==11;
+}
+
 
 const RE_sel = /text|password|search|tel|url/i;
 
@@ -248,6 +256,12 @@ interface KeyboardProps extends BoxProps {
 	 * "de-CH", "pl"... "fr-FR" when it is not given
 	 */
 	locale?: string;
+
+	/**
+	 * on a number or date field, the keyboard stays on the pad: no "abc" key
+	 * back to the letters. The other fields keep all the keys.
+	 */
+	numpadOnly?: boolean;
 }
 
 /**
@@ -284,7 +298,8 @@ export class Keyboard extends HBox<KeyboardProps>
 
 		this.hide( );
 
-		// a key: each contact, a finger or the mouse, the second tap of a quick double tap too
+		// a key: each contact, a finger or the mouse, the second tap of a quick double tap too.
+		// not the keys that draw the keyboard again, they act on the click
 		this.addDOMEvent( "pointerdown", (e) => {
 			this.handleKeyEvent( e );
 		});
@@ -352,7 +367,7 @@ export class Keyboard extends HBox<KeyboardProps>
             target = target.parentNode as HTMLElement;
         }
 
-		if( !key ) {
+		if( !key || redrawKey( key ) ) {
 			return;
 		}
 
@@ -631,6 +646,11 @@ export class Keyboard extends HBox<KeyboardProps>
 
 		if( this.mode=="number" || this.mode=="date" ) {
 			lines = kb_pads[this.mode];
+
+			// no key back to the letters: its place stays empty
+			if( this.props.numpadOnly ) {
+				lines = lines.map( line => line.replace( "{8}", "{9}" ) );
+			}
 		}
 		else if( this.mode=="accents" ) {
 			lines = accentLines( layout, this.upper );
@@ -765,7 +785,9 @@ export class Keyboard extends HBox<KeyboardProps>
 					icon, 
 					autorepeat: repeat, 
 					click: ( e ) => {
-						if( e.repeat ) {
+						// the keys that draw the keyboard again act on the click: the mousedown
+						// that follows a pointerdown would go to a key no longer in the page
+						if( e.repeat || redrawKey( key ) ) {
 							this._handleKey( key )
 						}
 					}

package/src/components/settingsview/settingsview.module.scss

@@ -0,0 +1,178 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file settingsview.module.scss
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 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 {
+	--settingsview-toc-width: 210px;
+	--settingsview-section-background: var( --color-primary-a10 );
+	--settingsview-section-title-background: var( --color-primary-a20 );
+	--settingsview-hover-background: color-mix( in srgb, var( --color-primary-a20 ) 60%, transparent );
+	--settingsview-marker: var( --accent-background );
+}
+
+.x4settingsview {
+	min-height: 0;
+
+	> .search {
+		flex-shrink: 0;
+		padding: 12px 32px 12px calc( var( --settingsview-toc-width ) + 32px );
+		border-bottom: 1px solid var( --border );
+
+		> .x4input {
+			flex: 1;
+			max-width: 900px;
+			margin: 0;
+			padding: 6px 10px;
+			border: 1px solid var( --border );
+			border-radius: 4px;
+
+			&:focus {
+				border-color: var( --settingsview-marker );
+			}
+		}
+	}
+
+	> .body {
+		min-height: 0;
+		align-items: stretch;
+	}
+
+	// the summary: the section at the top in the color of the text, marked on its left
+	.toc {
+		flex-shrink: 0;
+		width: var( --settingsview-toc-width );
+		margin: 0;
+		padding: 12px 0;
+		border: none;
+		border-right: 1px solid var( --border );
+		border-radius: 0;
+		background: transparent;
+
+		.x4item {
+			padding: 4px 4px 4px 16px;
+			border-left: 2px solid transparent;
+			border-radius: 0;
+			--label-color: var( --text-secondary );
+
+			&:hover {
+				background: transparent;
+				--label-color: var( --text-primary );
+			}
+
+			&.selected {
+				background: transparent;
+				border-left-color: var( --settingsview-marker );
+				--label-color: var( --text-primary );
+				font-weight: 600;
+			}
+		}
+	}
+
+	.sections {
+		align-items: flex-start;
+		gap: 24px;
+		min-height: 0;
+		overflow-y: auto;
+		padding: 20px 32px 32px;
+
+		> .nomatch {
+			padding: 8px;
+			--label-color: var( --text-secondary );
+		}
+	}
+
+	// a section: a panel, its title on a band
+	.section {
+		flex-shrink: 0;
+		width: 100%;
+		max-width: 900px;
+		padding: 0 8px 10px;
+		border: 1px solid var( --border );
+		border-radius: 8px;
+		background: var( --settingsview-section-background );
+		overflow: hidden;
+		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
+
+		// the last one shown: as high as the view, a click in the summary brings it to the top too
+		&.last {
+			min-height: 100%;
+		}
+
+		> .title {
+			margin: 0 -8px 6px;
+			padding: 12px 16px;
+			border-bottom: 1px solid var( --border );
+			background: var( --settingsview-section-title-background );
+			font-size: 1.1rem;
+			font-weight: 600;
+			--label-color: var( --text-primary );
+		}
+
+		> .description {
+			padding: 10px 8px 4px;
+			white-space: normal;
+			--label-color: var( --text-secondary );
+		}
+
+		// a section is as high as its content: what it holds takes its own height,
+		// a flex child (a Form) would get none
+		> * {
+			flex: none;
+		}
+
+		// a form of settings: the settings set the spaces
+		> .x4form {
+			padding: 0;
+		}
+	}
+
+	// a setting: its name, what it does, its controls; marked on its left while one has the focus
+	.x4settingitem {
+		flex-shrink: 0;
+		gap: 4px;
+		padding: 10px 8px 12px;
+		border-left: 2px solid transparent;
+		border-radius: 4px;
+
+		&:hover {
+			background: var( --settingsview-hover-background );
+		}
+
+		&:focus-within {
+			border-left-color: var( --settingsview-marker );
+		}
+
+		> .name {
+			font-weight: 600;
+			--label-color: var( --text-primary );
+		}
+
+		> .description {
+			white-space: normal;
+			--label-color: var( --text-secondary );
+		}
+
+		> .controls {
+			align-items: center;
+			gap: 10px;
+			padding-top: 4px;
+			flex-wrap: wrap;
+
+			> * {
+				margin: 0;
+			}
+		}
+	}
+}

package/src/components/settingsview/settingsview.ts

@@ -0,0 +1,289 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file settingsview.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 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, 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';
+import { Label } from '../label/label';
+import { Listbox } from '../listbox/listbox';
+
+import { _tr } from '../../x4.js';
+
+import "./settingsview.module.scss"
+
+/**
+ *
+ */
+
+export interface SettingItemProps extends BoxProps {
+	title: string;
+	description?: string;
+	content: Component | Component[];	// its controls
+}
+
+/**
+ * one setting: its name, what it does, then its controls on a line that wraps.
+ * It has no value of its own: its controls keep theirs. To read and write them
+ * together, put the items in a Form and give the controls a name.
+ */
+
+@class_ns( "x4" )
+export class SettingItem extends VBox<SettingItemProps> {
+
+	constructor( props: SettingItemProps ) {
+		// the content goes under the name and the description, not in the box itself
+		super( { ...props, content: undefined } );
+
+		this.setContent( [
+			new Label( { cls: "name", text: props.title } ),
+			props.description ? new Label( { cls: "description", text: props.description } ) : null,
+			new HBox( { cls: "controls", content: props.content } ),
+		] );
+	}
+
+	/**
+	 * the text a search looks in: the name and the description
+	 */
+
+	getSearchText( ) {
+		return `${this.props.title} ${this.props.description ?? ""}`;
+	}
+}
+
+/**
+ * a section: a panel, its title on a band, then its content
+ */
+
+export interface SettingsSection {
+	id: string;
+	title: string;
+	description?: string;		// under the title
+	content: Component[];		// SettingItem, Form of SettingItem, or any component
+}
+
+export interface EvSectionChange extends ComponentEvent {
+	readonly section: string;	// the id of the section now at the top
+}
+
+export interface SettingsViewProps extends BoxProps {
+	sections?: SettingsSection[];
+	searchable?: boolean;			// a search field above the sections
+	searchPlaceholder?: string;		// _tr.global.settings.search when missing
+	noMatch?: string;				// shown when the search finds nothing; _tr.global.settings.nomatch when missing
+	sectionChange?: EventCallback<EvSectionChange>;
+}
+
+export interface SettingsViewEvents extends ComponentEvents {
+	sectionChange: EvSectionChange;
+}
+
+/**
+ * text compared without case nor accents
+ */
+
+function normalize( text: string ) {
+	return text.normalize( "NFD" ).replace( /[̀-ͯ]/g, "" ).toLowerCase( );
+}
+
+/**
+ * a page of settings, as the settings of VS Code: the summary of the sections
+ * on the left, the sections on the right, one after the other. A click in the
+ * summary brings its section to the top; the summary follows the scroll.
+ * With searchable, a field above them filters the settings.
+ *
+ * @cssvar
+ * ```
+ * --settingsview-toc-width
+ * --settingsview-section-background
+ * --settingsview-section-title-background
+ * --settingsview-hover-background
+ * --settingsview-marker
+ * ```
+ */
+
+@class_ns( "x4" )
+export class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P,SettingsViewEvents> {
+
+	// fields, not refs: refs belong to the classes that derive from this one
+	private _search: Input = null;
+	private _toc: Listbox;
+	private _view: VBox;
+	private _noMatch: Label;
+
+	// shown: kept by the search (isVisible is false too while the view is hidden)
+	private _sections: { section: SettingsSection, box: VBox, shown: boolean }[] = [];
+	private _current = "";		// the id of the section at the top
+
+	constructor( props: P ) {
+		super( props );
+		this.mapPropEvents( props, "sectionChange" );
+
+		this.setContent( [
+			props.searchable ? new HBox( {
+				cls: "search",
+				content: this._search = new Input( {
+					type: "text",
+					placeholder: props.searchPlaceholder ?? _tr.global.settings.search,
+					change: ( ) => this._filter( ),
+				} ),
+			} ) : null,
+
+			new HBox( {
+				cls: "body",
+				flex: true,
+				content: [
+					this._toc = new Listbox( {
+						cls: "toc",
+						items: [],
+						selectionChange: ( ev ) => this.showSection( ev.selection[0] as string ),
+					} ),
+					this._view = new VBox( { cls: "sections", flex: true } ),
+				],
+			} ),
+		] );
+
+		this._noMatch = new Label( { cls: "nomatch", text: props.noMatch ?? _tr.global.settings.nomatch, hidden: true } );
+		this._view.addDOMEvent( "scroll", ( ) => this._followScroll( ) );
+
+		// Escape empties the search
+		if( this._search ) {
+			this._search.addDOMEvent( "keydown", ( ev ) => {
+				if( ev.key == "Escape" && this._search.getValue( ) ) {
+					this._search.setValue( "" );
+					this._filter( );
+				}
+			} );
+		}
+
+		if( props.sections ) {
+			this.setSections( props.sections );
+		}
+	}
+
+	/**
+	 * the sections, in their order; for a class that builds them in its
+	 * constructor, after super( )
+	 */
+
+	setSections( sections: SettingsSection[] ) {
+		this._sections = sections.map( section => ( {
+			section,
+			shown: true,
+			box: new VBox( {
+				cls: "section",
+				content: [
+					new Label( { cls: "title", text: section.title } ),
+					section.description ? new Label( { cls: "description", text: section.description } ) : null,
+					...section.content,
+				],
+			} ),
+		} ) );
+
+		this._view.setContent( [ ...this._sections.map( s => s.box ), this._noMatch ] );
+		this._current = "";
+		this._filter( );
+	}
+
+	/**
+	 * brings a section to the top of the view
+	 */
+
+	showSection( id: string, smooth = true ) {
+		this._sections.find( s => s.section.id == id )?.box.scrollIntoView( { behavior: smooth ? "smooth" : "auto", block: "start" } );
+	}
+
+	/**
+	 * the id of the section at the top of the view
+	 */
+
+	getSection( ) {
+		return this._current;
+	}
+
+	/**
+	 * shows what the search finds; everything when it is empty. A section
+	 * whose title or description holds the words is shown whole; otherwise
+	 * only its settings that hold them, and what holds those settings.
+	 */
+
+	private _filter( ) {
+		const text = this._search ? this._search.getValue( ) : "";
+		const words = normalize( text ).split( /\s+/ ).filter( w => w );
+		const matches = ( text: string ) => {
+			const t = normalize( text );
+			return words.every( w => t.includes( w ) );
+		};
+
+		let found = false;
+		for( const s of this._sections ) {
+			const { section, box } = s;
+			const whole = !words.length || matches( `${section.title} ${section.description ?? ""}` );
+			let shown = whole;
+
+			for( const c of section.content ) {
+				const items = c instanceof SettingItem ? [c] : c.enumChildComponents( true ).filter( x => x instanceof SettingItem ) as SettingItem[];
+				let some = false;
+				for( const item of items ) {
+					const ok = whole || matches( item.getSearchText( ) );
+					item.show( ok );
+					some ||= ok;
+				}
+				// what holds no setting (a table, a text) is shown with its whole section only
+				c.show( whole || some );
+				shown ||= some;
+			}
+
+			s.shown = shown;
+			box.show( shown );
+			found ||= shown;
+		}
+
+		this._noMatch.show( !found );
+
+		// the summary lists the sections shown; the last one is as high as the
+		// view at least: a click in the summary can bring every section to the top
+		const shown = this._sections.filter( s => s.shown );
+		this._sections.forEach( s => s.box.setClass( "last", s == shown[shown.length - 1] ) );
+		this._toc.clearSelection( false );
+		this._toc.setItems( shown.map( s => ( { id: s.section.id, text: s.section.title } ) ) );
+		this._current = "";
+		this._followScroll( );
+	}
+
+	/**
+	 * the summary on the section at the top of the view; the first one while the view is hidden
+	 */
+
+	private _followScroll( ) {
+		const view = this._view.getBoundingRect( );
+
+		let current = "";
+		for( const { section, box, shown } of this._sections ) {
+			if( shown && ( !current || ( view.height && box.getBoundingRect( ).top <= view.top + 40 ) ) ) {
+				current = section.id;
+			}
+		}
+
+		this._toc.select( current, false );
+		if( current != this._current ) {
+			this._current = current;
+			this.fire( "sectionChange", { section: current } );
+		}
+	}
+}

package/src/core/core_i18n.ts

@@ -331,6 +331,11 @@ let fr = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Rechercher un paramètre',
+			nomatch: 'Aucun paramètre trouvé',
+		},
 	}
 };
 
@@ -396,6 +401,151 @@ let en = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Search settings',
+			nomatch: 'No setting found',
+		},
+	}
+};
+
+/** @ignore */
+
+let es = {
+	global: {
+		ok: 'Aceptar',
+		cancel: 'Cancelar',
+		ignore: 'Ignorar',
+		yes: 'Sí',
+		no: 'No',
+		abort: "Anular",
+		retry: "Reintentar",
+
+		error: "Error",
+		today: "Hoy",
+
+		open: 'Abrir',
+		new: 'Nuevo',
+		delete: 'Eliminar',
+		close: 'Cerrar',
+		save: 'Guardar',
+
+		search: 'Buscar',
+		search_tip: 'Escriba el texto que desea buscar. <b>Intro</b> para iniciar la búsqueda. <b>Esc</b> para cancelar.',
+
+		required_field: "dato obligatorio",
+		invalid_format: "formato no válido",
+		invalid_email: 'dirección de correo no válida',
+		invalid_number: 'valor numérico no válido',
+
+		diff_date_seconds: '{0} segundos',
+		diff_date_minutes: '{0} minutos',
+		diff_date_hours: '{0} horas {1} minutos',
+
+		invalid_date: 'Fecha no reconocida ({0})',
+		empty_list: 'Lista vacía',
+
+		date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
+		date_format: 'D/M/Y',
+        date_time_format: 'D/M/Y H:I:S',
+
+		day_short: [ 'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb' ],
+		day_long: [ 'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado' ],
+
+		month_short: [ 'ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic' ],
+		month_long: [ 'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre' ],
+
+		property: 'Propiedad',
+		value: 'Valor',
+
+		err_403: `No tiene permisos suficientes para realizar esta acción`,
+
+		copy: 'Copiar',
+		cut: 'Cortar',
+		paste: 'Pegar',
+
+		filedrop: 'Suelte un archivo',
+
+		keyboard: {
+			next: 'Siguiente',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Buscar un ajuste',
+			nomatch: 'Ningún ajuste encontrado',
+		},
+	}
+};
+
+/** @ignore */
+
+let de = {
+	global: {
+		ok: 'OK',
+		cancel: 'Abbrechen',
+		ignore: 'Ignorieren',
+		yes: 'Ja',
+		no: 'Nein',
+		abort: "Abbrechen",
+		retry: "Wiederholen",
+
+		error: "Fehler",
+		today: "Heute",
+
+		open: 'Öffnen',
+		new: 'Neu',
+		delete: 'Löschen',
+		close: 'Schließen',
+		save: 'Speichern',
+
+		search: 'Suchen',
+		search_tip: 'Geben Sie den zu suchenden Text ein. <b>Enter</b> startet die Suche. <b>Esc</b> bricht ab.',
+
+		required_field: "Pflichtangabe",
+		invalid_format: "ungültiges Format",
+		invalid_email: 'ungültige E-Mail-Adresse',
+		invalid_number: 'ungültiger Zahlenwert',
+
+		diff_date_seconds: '{0} Sekunden',
+		diff_date_minutes: '{0} Minuten',
+		diff_date_hours: '{0} Stunden {1} Minuten',
+
+		invalid_date: 'Datum nicht erkannt ({0})',
+		empty_list: 'Leere Liste',
+
+		date_input_formats: 'd.m.y|d/m/y|d m y|d-m-y|dmy',
+		date_format: 'D.M.Y',
+        date_time_format: 'D.M.Y H:I:S',
+
+		day_short: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
+		day_long: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
+
+		month_short: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
+		month_long: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
+
+		property: 'Eigenschaft',
+		value: 'Wert',
+
+		err_403: `Sie haben nicht die erforderlichen Rechte für diese Aktion`,
+
+		copy: 'Kopieren',
+		cut: 'Ausschneiden',
+		paste: 'Einfügen',
+
+		filedrop: 'Datei hier ablegen',
+
+		keyboard: {
+			next: 'Weiter',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Einstellungen durchsuchen',
+			nomatch: 'Keine Einstellung gefunden',
+		},
 	}
 };
 
@@ -405,6 +555,13 @@ addTranslation( 'fr', fr );
 createLanguage( 'en', 'fr' );
 addTranslation( 'en', en );
 
+// a key they lack is taken in english
+createLanguage( 'es', 'en' );
+addTranslation( 'es', es );
+
+createLanguage( 'de', 'en' );
+addTranslation( 'de', de );
+
 selectLanguage( 'fr' );	// by default