@ckeditor/ckeditor5-ui 29.2.0 → 32.0.0

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,189 +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( 'input' ),
-				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
  */
 
@@ -9,7 +9,7 @@
 
 /* globals window */
 
-import { ContextPlugin } from 'ckeditor5/src/core';
+import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
 
 /**
  * The Notification plugin.