@ckeditor/ckeditor5-ui 40.1.0 → 41.0.0

package/src/bindings/draggableviewmixin.js

@@ -0,0 +1,144 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { global } from '@ckeditor/ckeditor5-utils';
+/**
+ * A mixin that brings the possibility to observe dragging of the view element.
+ * The view has to implement the {@link ~DraggableView} interface to use it:
+ *
+ * ```js
+ * export default class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
+ * 		// ...
+ * }
+ * ```
+ *
+ * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
+ * * `mousedown` and `touchstart` on the view element - starting the dragging,
+ * * `mousemove` and `touchmove` on the document - updating the view coordinates,
+ * * `mouseup` and `touchend` on the document - stopping the dragging.
+ *
+ * The mixin itself doesn't provide a visual feedback (i.e. the dragged element doesn't change its position) -
+ * it's up to the developer to implement it.
+ */
+export default function DraggableViewMixin(view) {
+    class DraggableMixin extends view {
+        /**
+         * @inheritdoc
+         */
+        constructor(...args) {
+            super(...args);
+            /**
+             * A bound version of {@link #_onDrag}.
+             */
+            this._onDragBound = this._onDrag.bind(this);
+            /**
+             * A bound version of {@link #_onDragEnd}.
+             */
+            this._onDragEndBound = this._onDragEnd.bind(this);
+            /**
+             * The last coordinates of the view. It's updated on every mouse move.
+             */
+            this._lastDraggingCoordinates = { x: 0, y: 0 };
+            this.on('render', () => {
+                this._attachListeners();
+            });
+            this.set('isDragging', false);
+        }
+        /**
+         * Attaches the listeners for the drag start.
+         */
+        _attachListeners() {
+            this.listenTo(this.element, 'mousedown', this._onDragStart.bind(this));
+            this.listenTo(this.element, 'touchstart', this._onDragStart.bind(this));
+        }
+        /**
+         * Attaches the listeners for the dragging and drag end.
+         */
+        _attachDragListeners() {
+            this.listenTo(global.document, 'mouseup', this._onDragEndBound);
+            this.listenTo(global.document, 'touchend', this._onDragEndBound);
+            this.listenTo(global.document, 'mousemove', this._onDragBound);
+            this.listenTo(global.document, 'touchmove', this._onDragBound);
+        }
+        /**
+         * Detaches the listeners after the drag end.
+         */
+        _detachDragListeners() {
+            this.stopListening(global.document, 'mouseup', this._onDragEndBound);
+            this.stopListening(global.document, 'touchend', this._onDragEndBound);
+            this.stopListening(global.document, 'mousemove', this._onDragBound);
+            this.stopListening(global.document, 'touchmove', this._onDragBound);
+        }
+        /**
+         * Starts the dragging listeners and sets the initial view coordinates.
+         */
+        _onDragStart(evt, domEvt) {
+            if (!this._isHandleElementPressed(domEvt)) {
+                return;
+            }
+            this._attachDragListeners();
+            let x = 0;
+            let y = 0;
+            // If dragging is performed with a mouse, there is only one set of coordinates available.
+            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
+            if (domEvt instanceof MouseEvent) {
+                x = domEvt.clientX;
+                y = domEvt.clientY;
+            }
+            else {
+                x = domEvt.touches[0].clientX;
+                y = domEvt.touches[0].clientY;
+            }
+            this._lastDraggingCoordinates = { x, y };
+            this.isDragging = true;
+        }
+        /**
+         * Updates the view coordinates and fires the `drag` event.
+         */
+        _onDrag(evt, domEvt) {
+            // If dragging was stopped by some external intervention, stop listening.
+            if (!this.isDragging) {
+                this._detachDragListeners();
+                return;
+            }
+            let newX = 0;
+            let newY = 0;
+            // If dragging is performed with a mouse, there is only one set of coordinates available.
+            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
+            if (domEvt instanceof MouseEvent) {
+                newX = domEvt.clientX;
+                newY = domEvt.clientY;
+            }
+            else {
+                newX = domEvt.touches[0].clientX;
+                newY = domEvt.touches[0].clientY;
+            }
+            // Prevents selection of text while dragging on Safari.
+            domEvt.preventDefault();
+            this.fire('drag', {
+                deltaX: Math.round(newX - this._lastDraggingCoordinates.x),
+                deltaY: Math.round(newY - this._lastDraggingCoordinates.y)
+            });
+            this._lastDraggingCoordinates = { x: newX, y: newY };
+        }
+        /**
+         * Stops the dragging and detaches the listeners.
+         */
+        _onDragEnd() {
+            this._detachDragListeners();
+            this.isDragging = false;
+        }
+        /**
+         * Checks if the drag handle element was pressed.
+         */
+        _isHandleElementPressed(domEvt) {
+            if (!this.dragHandleElement) {
+                return false;
+            }
+            return this.dragHandleElement === domEvt.target ||
+                (domEvt.target instanceof HTMLElement && this.dragHandleElement.contains(domEvt.target));
+        }
+    }
+    return DraggableMixin;
+}

package/src/bindings/injectcsstransitiondisabler.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/bindings/injectcsstransitiondisabler
  */
-import type View from '../view';
+import type View from '../view.js';
 /**
  * A decorator that brings the possibility to temporarily disable CSS transitions using
  * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen

package/src/bindings/injectcsstransitiondisabler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, 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.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/bindings/preventdefault
  */
-import type { ListenerBinding } from '../template';
-import type View from '../view';
+import type { ListenerBinding } from '../template.js';
+import type View from '../view.js';
 /**
  * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
  * {@link module:ui/view~View#element element of the view}. It shortens the definition of a

package/src/bindings/preventdefault.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, 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.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/bindings/submithandler
  */
-import type View from '../view';
+import type View from '../view.js';
 /**
  * A handler useful for {@link module:ui/view~View views} working as HTML forms. It intercepts a native DOM
  * `submit` event, prevents the default web browser behavior (navigation and page reload) and

package/src/bindings/submithandler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, 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.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, 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.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 export {};

package/src/button/buttonlabel.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/buttonlabel
 */
-import type View from '../view';
+import type View from '../view.js';
 /**
  * The button label interface. Implemented by the {@link module:ui/button/buttonlabelview~ButtonLabelView}
  * and any label view that can be used with the {@link module:ui/button/buttonview~ButtonView}.

package/src/button/buttonlabel.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 export {};

package/src/button/buttonlabelview.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/buttonlabelview
  */
-import View from '../view';
-import type ButtonLabel from './buttonlabel';
+import View from '../view.js';
+import type ButtonLabel from './buttonlabel.js';
 /**
  * A default implementation of the button view's label. It comes with a dynamic text support
  * via {@link module:ui/button/buttonlabelview~ButtonLabelView#text} property.

package/src/button/buttonlabelview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/buttonlabelview
  */
-import View from '../view';
+import View from '../view.js';
 /**
  * A default implementation of the button view's label. It comes with a dynamic text support
  * via {@link module:ui/button/buttonlabelview~ButtonLabelView#text} property.

package/src/button/buttonview.d.ts

@@ -1,15 +1,15 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/buttonview
  */
-import View from '../view';
-import IconView from '../icon/iconview';
-import type ViewCollection from '../viewcollection';
-import type { default as Button } from './button';
-import type ButtonLabel from './buttonlabel';
+import View from '../view.js';
+import IconView from '../icon/iconview.js';
+import type ViewCollection from '../viewcollection.js';
+import type { default as Button } from './button.js';
+import type ButtonLabel from './buttonlabel.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**

package/src/button/buttonview.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/buttonview
  */
-import View from '../view';
-import IconView from '../icon/iconview';
-import ButtonLabelView from './buttonlabelview';
+import View from '../view.js';
+import IconView from '../icon/iconview.js';
+import ButtonLabelView from './buttonlabelview.js';
 import { env, getEnvKeystrokeText, uid, delay } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**

package/src/button/switchbuttonview.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/switchbuttonview
  */
-import View from '../view';
-import ButtonView from './buttonview';
+import View from '../view.js';
+import ButtonView from './buttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/switchbutton.css';
 /**

package/src/button/switchbuttonview.js

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/button/switchbuttonview
  */
-import View from '../view';
-import ButtonView from './buttonview';
+import View from '../view.js';
+import ButtonView from './buttonview.js';
 import '../../theme/components/button/switchbutton.css';
 /**
  * The switch button view class.

package/src/collapsible/collapsibleview.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/collapsible/collapsibleview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../view.js';
+import ButtonView from '../button/buttonview.js';
+import type ViewCollection from '../viewcollection.js';
+import type { FocusableView } from '../focuscycler.js';
+import '../../theme/components/collapsible/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
+     *
+     * @observable
+     */
+    isCollapsed: boolean;
+    /**
+     * The text label of the {@link #buttonView}.
+     *
+     * @observable
+     * @default 'Show more'
+     */
+    label: string;
+    /**
+     * The ID of the label inside the {@link #buttonView} that describes the collapsible
+     * container for assistive technologies. Set after the button was {@link #render rendered}.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _collapsibleAriaLabelUid: string | undefined;
+    /**
+     * The main button that, when clicked, collapses or expands the container with {@link #children}.
+     */
+    readonly buttonView: ButtonView;
+    /**
+     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
+     */
+    readonly children: ViewCollection<FocusableView>;
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale: Locale, childViews?: Array<FocusableView>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the first focusable.
+     */
+    focus(): void;
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    private _createButtonView;
+}

package/src/collapsible/collapsibleview.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import View from '../view.js';
+import ButtonView from '../button/buttonview.js';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
+import '../../theme/components/collapsible/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale, childViews) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isCollapsed', false);
+        this.set('label', '');
+        this.buttonView = this._createButtonView();
+        this.children = this.createCollection();
+        this.set('_collapsibleAriaLabelUid', undefined);
+        if (childViews) {
+            this.children.addMany(childViews);
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-collapsible',
+                    bind.if('isCollapsed', 'ck-collapsible_collapsed')
+                ]
+            },
+            children: [
+                this.buttonView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-collapsible__children'
+                        ],
+                        role: 'region',
+                        hidden: bind.if('isCollapsed', 'hidden'),
+                        'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
+                    },
+                    children: this.children
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
+    }
+    /**
+     * Focuses the first focusable.
+     */
+    focus() {
+        this.buttonView.focus();
+    }
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    _createButtonView() {
+        const buttonView = new ButtonView(this.locale);
+        const bind = buttonView.bindTemplate;
+        buttonView.set({
+            withText: true,
+            icon: dropdownArrowIcon
+        });
+        buttonView.extendTemplate({
+            attributes: {
+                'aria-expanded': bind.to('isOn', value => String(value))
+            }
+        });
+        buttonView.bind('label').to(this);
+        buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
+        buttonView.on('execute', () => {
+            this.isCollapsed = !this.isCollapsed;
+        });
+        return buttonView;
+    }
+}

package/src/colorgrid/colorgridview.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/colorgrid/colorgridview
  */
-import View from '../view';
-import ColorTileView from './colortileview';
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
-import type ViewCollection from '../viewcollection';
+import View from '../view.js';
+import ColorTileView from './colortileview.js';
+import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable.js';
+import type ViewCollection from '../viewcollection.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/colorgrid/colorgrid.css';
 /**

package/src/colorgrid/colorgridview.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/colorgrid/colorgridview
  */
-import View from '../view';
-import ColorTileView from './colortileview';
-import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
+import View from '../view.js';
+import ColorTileView from './colortileview.js';
+import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid.js';
 import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/colorgrid/colorgrid.css';
 /**

package/src/colorgrid/colortileview.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/colorgrid/colortileview
  */
-import ButtonView from '../button/buttonview';
+import ButtonView from '../button/buttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.

package/src/colorgrid/colortileview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/colorgrid/colortileview
  */
-import ButtonView from '../button/buttonview';
+import ButtonView from '../button/buttonview.js';
 import checkIcon from '../../theme/icons/color-tile-check.svg';
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.

package/src/colorgrid/utils.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, 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-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**

package/src/colorpicker/colorpickerview.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module ui/colorpicker/colorpickerview
  */
-import { type ColorPickerViewConfig } from './utils';
+import { type ColorPickerViewConfig } from './utils.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../view';
-import type ViewCollection from '../viewcollection';
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
 import 'vanilla-colorful/hex-color-picker.js';
 import '../../theme/components/colorpicker/colorpicker.css';
 /**