@ckeditor/ckeditor5-ui 36.0.0 → 37.0.0-alpha.0

package/src/icon/iconview.js

@@ -10,8 +10,6 @@ import View from '../view';
 import '../../theme/components/icon/icon.css';
 /**
  * The icon view class.
- *
- * @extends module:ui/view~View
  */
 export default class IconView extends View {
     /**
@@ -20,50 +18,9 @@ export default class IconView extends View {
     constructor() {
         super();
         const bind = this.bindTemplate;
-        /**
-         * The SVG source of the icon.
-         *
-         * @observable
-         * @member {String} #content
-         */
         this.set('content', '');
-        /**
-         * This attribute specifies the boundaries to which the
-         * icon content should stretch.
-         *
-         * @observable
-         * @default '0 0 20 20'
-         * @member {String} #viewBox
-         */
         this.set('viewBox', '0 0 20 20');
-        /**
-         * The fill color of the child `path.ck-icon__fill`.
-         *
-         * @observable
-         * @default ''
-         * @member {String} #fillColor
-         */
         this.set('fillColor', '');
-        /**
-         * When set true (default), all parts of the icon inherit the fill color from the CSS `color` property of the
-         * icon's DOM parent.
-         *
-         * This effectively makes the icon monochromatic and allows it to change its fill color dynamically, for instance,
-         * when a {@link module:ui/button/buttonview~ButtonView} displays an icon and it switches between different states
-         * (pushed, hovered, etc.) the icon will follow along.
-         *
-         * **Note**: For the monochromatic icon to render properly, it must be made up of shapes that can be filled
-         * with color instead of, for instance, paths with strokes. Be sure to use the *outline stroke* tool
-         * (the name could be different in your vector graphics editor) before exporting your icon. Also, remove any
-         * excess `fill="..."` attributes that could break the color inheritance.
-         *
-         * **Note**: If you want to preserve the original look of your icon and disable dynamic color inheritance,
-         * set this flag to `false`.
-         *
-         * @observable
-         * @default true
-         * @member {Boolean} #isColorInherited
-         */
         this.set('isColorInherited', true);
         this.setTemplate({
             tag: 'svg',
@@ -102,8 +59,6 @@ export default class IconView extends View {
     }
     /**
      * Updates the {@link #element} with the value of {@link #content}.
-     *
-     * @private
      */
     _updateXMLContent() {
         if (this.content) {
@@ -130,8 +85,6 @@ export default class IconView extends View {
     }
     /**
      * Fills all child `path.ck-icon__fill` with the `#fillColor`.
-     *
-     * @private
      */
     _colorFillPaths() {
         if (this.fillColor) {
@@ -146,9 +99,6 @@ export default class IconView extends View {
  * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.
  *
  * See the [specification](https://www.w3.org/TR/SVG/styling.html#TermPresentationAttribute) to learn more.
- *
- * @protected
- * @member {Array.<String>} module:ui/icon/iconview~IconView.presentationalAttributeNames
  */
 IconView.presentationalAttributeNames = [
     'alignment-baseline', 'baseline-shift', 'clip-path', 'clip-rule', 'color', 'color-interpolation',

package/src/iframe/iframeview.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/iframe/iframeview
+ */
+import View from '../view';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The iframe view class.
+ *
+ * ```ts
+ * const iframe = new IframeView();
+ *
+ * iframe.render();
+ * document.body.appendChild( iframe.element );
+ *
+ * iframe.on( 'loaded', () => {
+ * 	console.log( 'The iframe has loaded', iframe.element.contentWindow );
+ * } );
+ *
+ * iframe.element.src = 'https://ckeditor.com';
+ * ```
+ */
+export default class IframeView extends View<HTMLIFrameElement> {
+    /**
+     * Creates a new instance of the iframe view.
+     *
+     * @param locale The locale instance.
+     */
+    constructor(locale?: Locale);
+    /**
+     * Renders the iframe's {@link #element} and returns a `Promise` for asynchronous
+     * child `contentDocument` loading process.
+     *
+     * @returns A promise which resolves once the iframe `contentDocument` has
+     * been {@link #event:loaded}.
+     */
+    render(): Promise<unknown>;
+}
+/**
+ * Fired when the DOM iframe's `contentDocument` finished loading.
+ *
+ * @eventName loaded
+ */
+export type IframeViewLoadedEvent = {
+    name: 'loaded';
+    args: [];
+};

package/src/iframe/iframeview.js

@@ -26,7 +26,7 @@ export default class IframeView extends View {
     /**
      * Creates a new instance of the iframe view.
      *
-     * @param {module:utils/locale~Locale} [locale] The locale instance.
+     * @param locale The locale instance.
      */
     constructor(locale) {
         super(locale);
@@ -51,7 +51,7 @@ export default class IframeView extends View {
      * Renders the iframe's {@link #element} and returns a `Promise` for asynchronous
      * child `contentDocument` loading process.
      *
-     * @returns {Promise} A promise which resolves once the iframe `contentDocument` has
+     * @returns A promise which resolves once the iframe `contentDocument` has
      * been {@link #event:loaded}.
      */
     render() {

package/src/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui
+ */
+export { default as clickOutsideHandler } from './bindings/clickoutsidehandler';
+export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler';
+export { default as CssTransitionDisablerMixin, type ViewWithCssTransitionDisabler } from './bindings/csstransitiondisablermixin';
+export { default as submitHandler } from './bindings/submithandler';
+export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
+export { default as BodyCollection } from './editorui/bodycollection';
+export { type ButtonExecuteEvent } from './button/button';
+export { default as ButtonView } from './button/buttonview';
+export { default as SwitchButtonView } from './button/switchbuttonview';
+export * from './colorgrid/utils';
+export { default as ColorGridView, type ColorDefinition } from './colorgrid/colorgridview';
+export { default as ColorTileView } from './colorgrid/colortileview';
+export { default as ComponentFactory } from './componentfactory';
+export { default as DropdownView } from './dropdown/dropdownview';
+export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview';
+export { default as SplitButtonView } from './dropdown/button/splitbuttonview';
+export * from './dropdown/utils';
+export { default as EditorUI, type EditorUIReadyEvent, type EditorUIUpdateEvent } from './editorui/editorui';
+export { default as EditorUIView } from './editorui/editoruiview';
+export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview';
+export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview';
+export { default as FormHeaderView } from './formheader/formheaderview';
+export { default as FocusCycler, type FocusableView } 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';
+export { default as LabelView } from './label/labelview';
+export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
+export * from './labeledfield/utils';
+export { default as ListItemView } from './list/listitemview';
+export { default as ListView } from './list/listview';
+export { default as Notification } from './notification/notification';
+export { default as Model } from './model';
+export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
+export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
+export { default as StickyPanelView } from './panel/sticky/stickypanelview';
+export { default as TooltipManager } from './tooltipmanager';
+export { default as Template, type TemplateDefinition } from './template';
+export { default as ToolbarView } from './toolbar/toolbarview';
+export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
+export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig';
+export { default as BalloonToolbar, type BaloonToolbarShowEvent } from './toolbar/balloon/balloontoolbar';
+export { default as BlockToolbar } from './toolbar/block/blocktoolbar';
+export { default as View, type UIViewRenderEvent } from './view';
+export { default as ViewCollection } from './viewcollection';

package/src/index.js

@@ -7,6 +7,7 @@
  */
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler';
+export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin';
 export { default as submitHandler } from './bindings/submithandler';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 export { default as BodyCollection } from './editorui/bodycollection';

package/src/input/inputview.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @license Copyright (c) 2003-2023, 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, type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/input/input.css';
+/**
+ * The base input view class.
+ */
+export default class InputView extends View<HTMLInputElement> {
+    /**
+     * Stores information about the editor UI focus and propagates it so various plugins and components
+     * are unified as a focus group.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * The value of the input.
+     *
+     * @observable
+     */
+    value: string | undefined;
+    /**
+     * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+     *
+     * @observable
+     */
+    id: string | undefined;
+    /**
+     * The `placeholder` attribute of the input.
+     *
+     * @observable
+     */
+    placeholder: string | undefined;
+    /**
+     * Controls whether the input view is in read-only mode.
+     *
+     * @observable
+     */
+    isReadOnly: boolean;
+    /**
+     * Set to `true` when the field has some error. Usually controlled via
+     * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+     *
+     * @observable
+     */
+    hasError: boolean;
+    /**
+     * The `id` of the element describing this field, e.g. when it has
+     * some error; it helps screen readers read the error text.
+     *
+     * @observable
+     */
+    ariaDescribedById: string | undefined;
+    /**
+     * An observable flag set to `true` when the input is currently focused by the user.
+     * Set to `false` otherwise.
+     *
+     * @readonly
+     * @observable
+     * @default false
+     */
+    isFocused: boolean;
+    /**
+     * An observable flag set to `true` when the input contains no text, i.e.
+     * when {@link #value} is `''`, `null`, or `false`.
+     *
+     * @readonly
+     * @observable
+     * @default true
+     */
+    isEmpty: boolean;
+    /**
+     * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc.
+     *
+     * @observable
+     * @default 'text'
+     */
+    inputMode: string;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Moves the focus to the input and selects the value.
+     */
+    select(): void;
+    /**
+     * Focuses the input.
+     */
+    focus(): void;
+    /**
+     * Updates the {@link #isEmpty} property value on demand.
+     */
+    private _updateIsEmpty;
+    /**
+     * Sets the `value` property of the {@link #element DOM element} on demand.
+     */
+    private _setDomElementValue;
+}
+/**
+ * Fired when the user types in the input. Corresponds to the native
+ * DOM `input` event.
+ *
+ * @eventName input
+ */
+export type InputViewInputEvent = {
+    name: 'input';
+    args: [InputEvent];
+};

package/src/input/inputview.js

@@ -10,8 +10,6 @@ import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/input/input.css';
 /**
  * The base input view class.
- *
- * @extends module:ui/view~View
  */
 export default class InputView extends View {
     /**
@@ -19,85 +17,15 @@ export default class InputView extends View {
      */
     constructor(locale) {
         super(locale);
-        /**
-         * The value of the input.
-         *
-         * @observable
-         * @member {String} #value
-         */
         this.set('value', undefined);
-        /**
-         * The `id` attribute of the input (i.e. to pair with a `<label>` element).
-         *
-         * @observable
-         * @member {String} #id
-         */
         this.set('id', undefined);
-        /**
-         * The `placeholder` attribute of the input.
-         *
-         * @observable
-         * @member {String} #placeholder
-         */
         this.set('placeholder', undefined);
-        /**
-         * 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', undefined);
-        /**
-         * 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({
@@ -125,12 +53,6 @@ export default class InputView extends View {
                 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
@@ -168,16 +90,12 @@ export default class InputView extends View {
     }
     /**
      * 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;

package/src/inputnumber/inputnumberview.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2023, 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';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The number input view class.
+ */
+export default class InputNumberView extends InputView {
+    /**
+     * The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
+     *
+     * @observable
+     * @default undefined
+     */
+    min: number | undefined;
+    /**
+     * The value of the `max` DOM attribute (the highest accepted value) set on the {@link #element}.
+     *
+     * @observable
+     * @default undefined
+     */
+    max: number | undefined;
+    /**
+     * The value of the `step` DOM attribute set on the {@link #element}.
+     *
+     * @observable
+     * @default undefined
+     */
+    step: number | undefined;
+    /**
+     * Creates an instance of the input number view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param options The options of the input.
+     * @param options.min The value of the `min` DOM attribute (the lowest accepted value).
+     * @param options.max The value of the `max` DOM attribute (the highest accepted value).
+     * @param options.step The value of the `step` DOM attribute.
+     */
+    constructor(locale?: Locale, { min, max, step }?: {
+        min?: number;
+        max?: number;
+        step?: number;
+    });
+}

package/src/inputnumber/inputnumberview.js

@@ -8,45 +8,22 @@
 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.
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param options The options of the input.
+     * @param options.min The value of the `min` DOM attribute (the lowest accepted value).
+     * @param options.max The value of the `max` DOM attribute (the highest accepted value).
+     * @param 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: {

package/src/inputtext/inputtextview.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/inputtext/inputtextview
+ */
+import InputView from '../input/inputview';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The text input view class.
+ */
+export default class InputTextView extends InputView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+}

package/src/inputtext/inputtextview.js

@@ -8,8 +8,6 @@
 import InputView from '../input/inputview';
 /**
  * The text input view class.
- *
- * @extends module:ui/input/inputview~InputView
  */
 export default class InputTextView extends InputView {
     /**

package/src/label/labelview.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/label/labelview
+ */
+import View from '../view';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/label/label.css';
+/**
+ * The label view class.
+ */
+export default class LabelView extends View {
+    /**
+     * An unique id of the label. It can be used by other UI components to reference
+     * the label, for instance, using the `aria-describedby` DOM attribute.
+     */
+    readonly id: string;
+    /**
+     * The text of the label.
+     *
+     * @observable
+     */
+    text: string | undefined;
+    /**
+     * The `for` attribute of the label (i.e. to pair with an `<input>` element).
+     *
+     * @observable
+     */
+    for: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+}

package/src/label/labelview.js

@@ -10,8 +10,6 @@ import { uid } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/label/label.css';
 /**
  * The label view class.
- *
- * @extends module:ui/view~View
  */
 export default class LabelView extends View {
     /**
@@ -19,26 +17,8 @@ export default class LabelView extends View {
      */
     constructor(locale) {
         super(locale);
-        /**
-         * The text of the label.
-         *
-         * @observable
-         * @member {String} #text
-         */
         this.set('text', undefined);
-        /**
-         * The `for` attribute of the label (i.e. to pair with an `<input>` element).
-         *
-         * @observable
-         * @member {String} #for
-         */
         this.set('for', undefined);
-        /**
-         * An unique id of the label. It can be used by other UI components to reference
-         * the label, for instance, using the `aria-describedby` DOM attribute.
-         *
-         * @member {String} #id
-         */
         this.id = `ck-editor__label_${uid()}`;
         const bind = this.bindTemplate;
         this.setTemplate({