@ckeditor/ckeditor5-ui 31.0.0 → 33.0.0

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] The 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' )
+			}
+		} );
+	}
+}

package/src/inputtext/inputtextview.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,192 +7,27 @@
  * @module ui/inputtext/inputtextview
  */
 
-import View from '../view';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import '../../theme/components/inputtext/inputtext.css';
+import InputView from '../input/inputview';
 
 /**
  * The text input view class.
  *
- * @extends module:ui/view~View
+ * @extends module:ui/input/inputview~InputView
  */
-export default class InputTextView extends View {
+export default class InputTextView extends InputView {
 	/**
 	 * @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 );
-
-		const bind = this.bindTemplate;
-
-		this.setTemplate( {
-			tag: 'input',
+		this.extendTemplate( {
 			attributes: {
 				type: 'text',
 				class: [
-					'ck',
-					'ck-input',
-					'ck-input-text',
-					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' ),
-				'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 ) )
+					'ck-input-text'
+				]
 			}
 		} );
-
-		/**
-		 * 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();
-		} );
-	}
-
-	/**
-	 * 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/label/labelview.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/labeledfield/labeledfieldview.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/labeledfield/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
  */
 
@@ -8,6 +8,7 @@
  */
 
 import InputTextView from '../inputtext/inputtextview';
+import InputNumberView from '../inputnumber/inputnumberview';
 import { createDropdown } from '../dropdown/utils';
 
 /**
@@ -21,12 +22,12 @@ import { createDropdown } from '../dropdown/utils';
  * * It sets input's `id` and `ariaDescribedById` attributes.
  * * It binds input's `isReadOnly` to the labeled view.
  * * It binds input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the input..
+ * * It enables a logic that cleans up the error when user starts typing in the input.
  *
  * Usage:
  *
- *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
- *		console.log( labeledInputView.view ); // An input instance.
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
+ *		console.log( labeledInputView.fieldView ); // A text input instance.
  *
  * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the
@@ -57,6 +58,54 @@ export function createLabeledInputText( labeledFieldView, viewUid, statusUid ) {
 	return inputView;
 }
 
+/**
+ * A helper for creating labeled number inputs.
+ *
+ * It creates an instance of a {@link module:ui/inputnumber/inputnumberview~InputNumberView input number} that is
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets input's `id` and `ariaDescribedById` attributes.
+ * * It binds input's `isReadOnly` to the labeled view.
+ * * It binds input's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the input.
+ *
+ * Usage:
+ *
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledInputNumber );
+ *		console.log( labeledInputView.fieldView ); // A number input instance.
+ *
+ * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
+ * @param {String} viewUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
+ * @param {String} statusUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
+ * @returns {module:ui/inputnumber/inputnumberview~InputNumberView} The input number view instance.
+ */
+export function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
+	const inputView = new InputNumberView( labeledFieldView.locale );
+
+	inputView.set( {
+		id: viewUid,
+		ariaDescribedById: statusUid,
+		inputMode: 'numeric'
+	} );
+
+	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+
+	inputView.on( 'input', () => {
+		// UX: Make the error text disappear and disable the error indicator as the user
+		// starts fixing the errors.
+		labeledFieldView.errorText = null;
+	} );
+
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
+
+	return inputView;
+}
+
 /**
  * A helper for creating labeled dropdowns.
  *
@@ -71,7 +120,7 @@ export function createLabeledInputText( labeledFieldView, viewUid, statusUid ) {
  * Usage:
  *
  *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
- *		console.log( labeledInputView.view ); // A dropdown instance.
+ *		console.log( labeledInputView.fieldView ); // A dropdown instance.
  *
  * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the

package/src/labeledinput/labeledinputview.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/list/listitemview.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/list/listseparatorview.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/list/listview.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
  */
 
@@ -109,6 +109,16 @@ export default class ListView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the first focusable in {@link #items}.
 	 */

package/src/model.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/notification/notification.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
  */