@ckeditor/ckeditor5-ui 29.2.0 → 32.0.0

package/src/bindings/injectcsstransitiondisabler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/bindings/preventdefault.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/bindings/submithandler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/button/button.jsdoc

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/button/buttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -184,7 +184,7 @@ export default class ButtonView extends View {
 		this.children.add( this.tooltipView );
 		this.children.add( this.labelView );
 
-		if ( this.withKeystroke ) {
+		if ( this.withKeystroke && this.keystroke ) {
 			this.children.add( this.keystrokeView );
 		}
 	}

package/src/button/switchbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/colorgrid/colorgridview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -176,6 +176,16 @@ export default class ColorGridView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Fired when the `ColorTileView` for the picked item is executed.
 	 *

package/src/colorgrid/colortileview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/colorgrid/utils.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/componentfactory.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/button/dropdownbutton.jsdoc

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/button/dropdownbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/button/splitbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -155,6 +155,16 @@ export default class SplitButtonView extends View {
 		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the {@link #actionView#element} of the action part of split button.
 	 */

package/src/dropdown/dropdownpanelfocusable.jsdoc

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/dropdownpanelview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/dropdownview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/dropdown/utils.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/editableui/editableuiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/editableui/inline/inlineeditableuiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/editorui/bodycollection.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/editorui/boxed/boxededitoruiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/editorui/editoruiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/focuscycler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -7,7 +7,7 @@
  * @module ui/focuscycler
  */
 
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
 
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
@@ -131,6 +131,8 @@ export default class FocusCycler {
 	 * Returns the first focusable view in {@link #focusables}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #first
 	 */
@@ -142,6 +144,8 @@ export default class FocusCycler {
 	 * Returns the last focusable view in {@link #focusables}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #last
 	 */
@@ -153,6 +157,8 @@ export default class FocusCycler {
 	 * Returns the next focusable view in {@link #focusables} based on {@link #current}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #next
 	 */
@@ -164,6 +170,8 @@ export default class FocusCycler {
 	 * Returns the previous focusable view in {@link #focusables} based on {@link #current}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #previous
 	 */
@@ -201,6 +209,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #first} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusFirst() {
 		this._focus( this.first );
@@ -208,6 +218,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #last} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusLast() {
 		this._focus( this.last );
@@ -215,6 +227,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #next} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusNext() {
 		this._focus( this.next );
@@ -222,6 +236,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #previous} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusPrevious() {
 		this._focus( this.previous );
@@ -269,7 +285,6 @@ export default class FocusCycler {
 		do {
 			const view = this.focusables.get( index );
 
-			// TODO: Check if view is visible.
 			if ( isFocusable( view ) ) {
 				return view;
 			}
@@ -288,5 +303,5 @@ export default class FocusCycler {
 // @param {module:ui/view~View} view A view to be checked.
 // @returns {Boolean}
 function isFocusable( view ) {
-	return !!( view.focus && global.window.getComputedStyle( view.element ).display != 'none' );
+	return !!( view.focus && isVisible( view.element ) );
 }

package/src/formheader/formheaderview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/icon/iconview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/iframe/iframeview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -32,7 +32,9 @@ export { default as FormHeaderView } from './formheader/formheaderview';
 export { default as FocusCycler } from './focuscycler';
 
 export { default as IconView } from './icon/iconview';
+export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
+export { default as InputNumberView } from './inputnumber/inputnumberview';
 
 export { default as IframeView } from './iframe/iframeview';
 

package/src/input/inputview.js

@@ -0,0 +1,216 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/input/inputview
+ */
+
+import View from '../view';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+
+import '../../theme/components/input/input.css';
+
+/**
+ * The base input view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class InputView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * The value of the input.
+		 *
+		 * @observable
+		 * @member {String} #value
+		 */
+		this.set( 'value' );
+
+		/**
+		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+		 *
+		 * @observable
+		 * @member {String} #id
+		 */
+		this.set( 'id' );
+
+		/**
+		 * The `placeholder` attribute of the input.
+		 *
+		 * @observable
+		 * @member {String} #placeholder
+		 */
+		this.set( 'placeholder' );
+
+		/**
+		 * Controls whether the input view is in read-only mode.
+		 *
+		 * @observable
+		 * @member {Boolean} #isReadOnly
+		 */
+		this.set( 'isReadOnly', false );
+
+		/**
+		 * Set to `true` when the field has some error. Usually controlled via
+		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+		 *
+		 * @observable
+		 * @member {Boolean} #hasError
+		 */
+		this.set( 'hasError', false );
+
+		/**
+		 * The `id` of the element describing this field, e.g. when it has
+		 * some error, it helps screen readers read the error text.
+		 *
+		 * @observable
+		 * @member {Boolean} #ariaDescribedById
+		 */
+		this.set( 'ariaDescribedById' );
+
+		/**
+		 * Stores information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An observable flag set to `true` when the input is currently focused by the user.
+		 * Set to `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.bind( 'isFocused' ).to( this.focusTracker );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text, i.e.
+		 * when {@link #value} is `''`, `null`, or `false`.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
+		 * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc..
+		 *
+		 * @observable
+		 * @member {Boolean} #inputMode
+		 * @default 'text'
+		 */
+		this.set( 'inputMode', 'text' );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'input',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				readonly: bind.to( 'isReadOnly' ),
+				inputmode: bind.to( 'inputMode' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			on: {
+				input: bind.to( ( ...args ) => {
+					this.fire( 'input', ...args );
+					this._updateIsEmpty();
+				} ),
+				change: bind.to( this._updateIsEmpty.bind( this ) )
+			}
+		} );
+
+		/**
+		 * Fired when the user types in the input. Corresponds to the native
+		 * DOM `input` event.
+		 *
+		 * @event input
+		 */
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.focusTracker.add( this.element );
+
+		this._setDomElementValue( this.value );
+		this._updateIsEmpty();
+
+		// Bind `this.value` to the DOM element's value.
+		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
+		this.on( 'change:value', ( evt, name, value ) => {
+			this._setDomElementValue( value );
+			this._updateIsEmpty();
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
+	/**
+	 * Moves the focus to the input and selects the value.
+	 */
+	select() {
+		this.element.select();
+	}
+
+	/**
+	 * Focuses the input.
+	 */
+	focus() {
+		this.element.focus();
+	}
+
+	/**
+	 * Updates the {@link #isEmpty} property value on demand.
+	 *
+	 * @private
+	 */
+	_updateIsEmpty() {
+		this.isEmpty = isInputElementEmpty( this.element );
+	}
+
+	/**
+	 * Sets the `value` property of the {@link #element DOM element} on demand.
+	 *
+	 * @private
+	 */
+	_setDomElementValue( value ) {
+		this.element.value = ( !value && value !== 0 ) ? '' : value;
+	}
+}
+
+function isInputElementEmpty( domElement ) {
+	return !domElement.value;
+}

package/src/inputnumber/inputnumberview.js

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/inputnumber/inputnumberview
+ */
+
+import InputView from '../input/inputview';
+
+/**
+ * The number input view class.
+ *
+ * @extends module:ui/input/inputview~InputView
+ */
+export default class InputNumberView extends InputView {
+	/**
+	 * Creates an instance of the input number view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Object} [options] Options of the input.
+	 * @param {Number} [options.min] The value of the `min` DOM attribute (the lowest accepted value).
+	 * @param {Number} [options.max] The value of the `max` DOM attribute (the highest accepted value).
+	 * @param {Number} [options.step] The value of the `step` DOM attribute.
+	 */
+	constructor( locale, { min, max, step } = {} ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number} #min
+		 */
+		this.set( 'min', min );
+
+		/**
+		 * The value of the `max` DOM attribute (the highest accepted value) set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number} #max
+		 */
+		this.set( 'max', max );
+
+		/**
+		 * The value of the `step` DOM attribute set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number} #step
+		 */
+		this.set( 'step', step );
+
+		this.extendTemplate( {
+			attributes: {
+				type: 'number',
+				class: [
+					'ck-input-number'
+				],
+				min: bind.to( 'min' ),
+				max: bind.to( 'max' ),
+				step: bind.to( 'step' )
+			}
+		} );
+	}
+}