@ckeditor/ckeditor5-ui 38.2.0-alpha.0 → 38.2.0-alpha.1

package/src/colorselector/documentcolorcollection.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @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/colorselector/documentcolorcollection
+ */
+import type { ColorDefinition } from '../colorgrid/colorgridview.js';
+import { Collection, type CollectionAddEvent, type CollectionRemoveEvent, type CollectionChangeEvent } from '@ckeditor/ckeditor5-utils';
+declare const DocumentColorCollection_base: import("@ckeditor/ckeditor5-utils").Mixed<{
+    new (options?: {
+        readonly idProperty?: string | undefined;
+    } | undefined): Collection<ColorDefinition>;
+    new (initialItems: Iterable<ColorDefinition>, options?: {
+        readonly idProperty?: string | undefined;
+    } | undefined): Collection<ColorDefinition>;
+}, import("@ckeditor/ckeditor5-utils").Observable>;
+/**
+ * A collection to store document colors. It enforces colors to be unique.
+ */
+export default class DocumentColorCollection extends DocumentColorCollection_base {
+    /**
+     * Indicates whether the document color collection is empty.
+     *
+     * @observable
+     */
+    readonly isEmpty: boolean;
+    constructor(options?: any);
+    /**
+     * Adds a color to the document color collection.
+     *
+     * This method ensures that no color duplicates are inserted (compared using
+     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
+     *
+     * If the item does not have an ID, it will be automatically generated and set on the item.
+     *
+     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
+     * @fires add
+     * @fires change
+     */
+    add(item: ColorDefinition, index?: number): this;
+    /**
+     * Checks if an object with given colors is present in the document color collection.
+     */
+    hasColor(color: string): boolean;
+}
+/**
+ * Fired when the collection was changed due to adding or removing items.
+ *
+ * @eventName ~DocumentColorCollection#change
+ * @param data Changed items.
+ */
+export type DocumentColorCollectionChangeEvent = CollectionChangeEvent;
+/**
+ * Fired when an item is added to the collection.
+ *
+ * @eventName ~DocumentColorCollection#add
+ * @param item The added item.
+ * @param index An index where the addition occurred.
+ */
+export type DocumentColorCollectionAddEvent = CollectionAddEvent;
+/**
+ * Fired when an item is removed from the collection.
+ *
+ * @eventName ~DocumentColorCollection#remove
+ * @param item The removed item.
+ * @param index Index from which item was removed.
+ */
+export type DocumentColorCollectionRemoveEvent = CollectionRemoveEvent;
+export {};

package/src/colorselector/documentcolorcollection.js

@@ -0,0 +1,42 @@
+/**
+ * @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
+ */
+import { Collection, ObservableMixin } from '@ckeditor/ckeditor5-utils';
+/**
+ * A collection to store document colors. It enforces colors to be unique.
+ */
+export default class DocumentColorCollection extends ObservableMixin((Collection)) {
+    constructor(options) {
+        super(options);
+        this.set('isEmpty', true);
+        this.on('change', () => {
+            this.set('isEmpty', this.length === 0);
+        });
+    }
+    /**
+     * Adds a color to the document color collection.
+     *
+     * This method ensures that no color duplicates are inserted (compared using
+     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
+     *
+     * If the item does not have an ID, it will be automatically generated and set on the item.
+     *
+     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
+     * @fires add
+     * @fires change
+     */
+    add(item, index) {
+        if (this.find(element => element.color === item.color)) {
+            // No duplicates are allowed.
+            return this;
+        }
+        return super.add(item, index);
+    }
+    /**
+     * Checks if an object with given colors is present in the document color collection.
+     */
+    hasColor(color) {
+        return !!this.find(item => item.color === color);
+    }
+}

package/src/componentfactory.d.ts

@@ -7,7 +7,7 @@
  */
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import type { Editor } from '@ckeditor/ckeditor5-core';
-import type View from './view';
+import type View from './view.js';
 /**
  * A helper class implementing the UI component ({@link module:ui/view~View view}) factory.
  *

package/src/dropdown/button/dropdownbutton.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module ui/dropdown/button/dropdownbutton
  */
-import type Button from '../../button/button';
-import type ViewCollection from '../../viewcollection';
+import type Button from '../../button/button.js';
+import type ViewCollection from '../../viewcollection.js';
 /**
  * The dropdown button interface.
  */

package/src/dropdown/button/dropdownbuttonview.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module ui/dropdown/button/dropdownbuttonview
  */
-import ButtonView from '../../button/buttonview';
-import type DropdownButton from './dropdownbutton';
-import IconView from '../../icon/iconview';
+import ButtonView from '../../button/buttonview.js';
+import type DropdownButton from './dropdownbutton.js';
+import IconView from '../../icon/iconview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The default dropdown button view class.

package/src/dropdown/button/dropdownbuttonview.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/dropdown/button/dropdownbuttonview
  */
-import ButtonView from '../../button/buttonview';
-import IconView from '../../icon/iconview';
+import ButtonView from '../../button/buttonview.js';
+import IconView from '../../icon/iconview.js';
 import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 /**
  * The default dropdown button view class.

package/src/dropdown/button/splitbuttonview.d.ts

@@ -5,11 +5,11 @@
 /**
  * @module ui/dropdown/button/splitbuttonview
  */
-import View from '../../view';
-import ButtonView from '../../button/buttonview';
-import type ViewCollection from '../../viewcollection';
-import type Button from '../../button/button';
-import type DropdownButton from './dropdownbutton';
+import View from '../../view.js';
+import ButtonView from '../../button/buttonview.js';
+import type ViewCollection from '../../viewcollection.js';
+import type Button from '../../button/button.js';
+import type DropdownButton from './dropdownbutton.js';
 import { KeystrokeHandler, FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/dropdown/splitbutton.css';
 /**

package/src/dropdown/button/splitbuttonview.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/dropdown/button/splitbuttonview
  */
-import View from '../../view';
-import ButtonView from '../../button/buttonview';
+import View from '../../view.js';
+import ButtonView from '../../button/buttonview.js';
 import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
 import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 import '../../../theme/components/dropdown/splitbutton.css';

package/src/dropdown/dropdownpanelview.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module ui/dropdown/dropdownpanelview
  */
-import View from '../view';
-import type ViewCollection from '../viewcollection';
-import type DropdownPanelFocusable from './dropdownpanelfocusable';
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
+import type DropdownPanelFocusable from './dropdownpanelfocusable.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The dropdown panel view class.

package/src/dropdown/dropdownpanelview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/dropdown/dropdownpanelview
  */
-import View from '../view';
+import View from '../view.js';
 import { logWarning } from '@ckeditor/ckeditor5-utils';
 /**
  * The dropdown panel view class.

package/src/dropdown/dropdownview.d.ts

@@ -5,12 +5,12 @@
 /**
  * @module ui/dropdown/dropdownview
  */
-import View from '../view';
-import type { default as DropdownButton } from './button/dropdownbutton';
-import type { default as DropdownPanelView, PanelPosition } from './dropdownpanelview';
-import type { FocusableView } from '../focuscycler';
-import type ListView from '../list/listview';
-import type ToolbarView from '../toolbar/toolbarview';
+import View from '../view.js';
+import type { default as DropdownButton } from './button/dropdownbutton.js';
+import type { default as DropdownPanelView, PanelPosition } from './dropdownpanelview.js';
+import type { FocusableView } from '../focuscycler.js';
+import type ListView from '../list/listview.js';
+import type ToolbarView from '../toolbar/toolbarview.js';
 import { KeystrokeHandler, FocusTracker, type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/dropdown.css';
 /**

package/src/dropdown/dropdownview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/dropdown/dropdownview
  */
-import View from '../view';
+import View from '../view.js';
 import { KeystrokeHandler, FocusTracker, getOptimalPosition } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/dropdown.css';
 /**

package/src/dropdown/utils.d.ts

@@ -2,13 +2,13 @@
  * @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
  */
-import DropdownView from './dropdownview';
-import ViewCollection from '../viewcollection';
-import type { default as View } from '../view';
-import type Model from '../model';
-import type DropdownButton from './button/dropdownbutton';
-import type { FocusableView } from '../focuscycler';
-import type { FalsyValue } from '../template';
+import DropdownView from './dropdownview.js';
+import ViewCollection from '../viewcollection.js';
+import type { default as View } from '../view.js';
+import type Model from '../model.js';
+import type DropdownButton from './button/dropdownbutton.js';
+import type { FocusableView } from '../focuscycler.js';
+import type { FalsyValue } from '../template.js';
 import { type Collection, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';

package/src/dropdown/utils.js

@@ -5,18 +5,18 @@
 /**
  * @module ui/dropdown/utils
  */
-import DropdownPanelView from './dropdownpanelview';
-import DropdownView from './dropdownview';
-import DropdownButtonView from './button/dropdownbuttonview';
-import ToolbarView from '../toolbar/toolbarview';
-import ListView from '../list/listview';
-import ListItemView from '../list/listitemview';
-import ListSeparatorView from '../list/listseparatorview';
-import ButtonView from '../button/buttonview';
-import SplitButtonView from './button/splitbuttonview';
-import SwitchButtonView from '../button/switchbuttonview';
-import ViewCollection from '../viewcollection';
-import clickOutsideHandler from '../bindings/clickoutsidehandler';
+import DropdownPanelView from './dropdownpanelview.js';
+import DropdownView from './dropdownview.js';
+import DropdownButtonView from './button/dropdownbuttonview.js';
+import ToolbarView from '../toolbar/toolbarview.js';
+import ListView from '../list/listview.js';
+import ListItemView from '../list/listitemview.js';
+import ListSeparatorView from '../list/listseparatorview.js';
+import ButtonView from '../button/buttonview.js';
+import SplitButtonView from './button/splitbuttonview.js';
+import SwitchButtonView from '../button/switchbuttonview.js';
+import ViewCollection from '../viewcollection.js';
+import clickOutsideHandler from '../bindings/clickoutsidehandler.js';
 import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
@@ -353,7 +353,10 @@ function closeDropdownOnClickOutside(dropdownView) {
             callback: () => {
                 dropdownView.isOpen = false;
             },
-            contextElements: [dropdownView.element]
+            contextElements: () => [
+                dropdownView.element,
+                ...dropdownView.focusTracker._elements
+            ]
         });
     });
 }

package/src/editableui/editableuiview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/editableui/editableuiview
  */
-import View from '../view';
+import View from '../view.js';
 import type { View as EditingView } from '@ckeditor/ckeditor5-engine';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**

package/src/editableui/editableuiview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/editableui/editableuiview
  */
-import View from '../view';
+import View from '../view.js';
 /**
  * The editable UI view class.
  */

package/src/editableui/inline/inlineeditableuiview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/editableui/inline/inlineeditableuiview
  */
-import EditableUIView from '../editableuiview';
+import EditableUIView from '../editableuiview.js';
 import type { View } from '@ckeditor/ckeditor5-engine';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**

package/src/editableui/inline/inlineeditableuiview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/editableui/inline/inlineeditableuiview
  */
-import EditableUIView from '../editableuiview';
+import EditableUIView from '../editableuiview.js';
 /**
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  */

package/src/editorui/bodycollection.d.ts

@@ -2,8 +2,8 @@
  * @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
  */
-import ViewCollection from '../viewcollection';
-import type View from '../view';
+import ViewCollection from '../viewcollection.js';
+import type View from '../view.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached

package/src/editorui/bodycollection.js

@@ -6,8 +6,8 @@
  * @module ui/editorui/bodycollection
  */
 /* globals document */
-import Template from '../template';
-import ViewCollection from '../viewcollection';
+import Template from '../template.js';
+import ViewCollection from '../viewcollection.js';
 import { createElement } from '@ckeditor/ckeditor5-utils';
 /**
  * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached

package/src/editorui/boxed/boxededitoruiview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module ui/editorui/boxed/boxededitoruiview
  */
-import EditorUIView from '../editoruiview';
-import type ViewCollection from '../../viewcollection';
+import EditorUIView from '../editoruiview.js';
+import type ViewCollection from '../../viewcollection.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The boxed editor UI view class. This class represents an editor interface

package/src/editorui/boxed/boxededitoruiview.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/editorui/boxed/boxededitoruiview
  */
-import EditorUIView from '../editoruiview';
-import LabelView from '../../label/labelview';
+import EditorUIView from '../editoruiview.js';
+import LabelView from '../../label/labelview.js';
 /**
  * The boxed editor UI view class. This class represents an editor interface
  * consisting of a toolbar and an editable area, enclosed within a box.

package/src/editorui/editorui.d.ts

@@ -5,11 +5,11 @@
 /**
  * @module ui/editorui/editorui
  */
-import ComponentFactory from '../componentfactory';
-import TooltipManager from '../tooltipmanager';
-import PoweredBy from './poweredby';
-import type EditorUIView from './editoruiview';
-import type ToolbarView from '../toolbar/toolbarview';
+import ComponentFactory from '../componentfactory.js';
+import TooltipManager from '../tooltipmanager.js';
+import PoweredBy from './poweredby.js';
+import type EditorUIView from './editoruiview.js';
+import type ToolbarView from '../toolbar/toolbarview.js';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import type { Editor } from '@ckeditor/ckeditor5-core';
 declare const EditorUI_base: {

package/src/editorui/editorui.js

@@ -6,9 +6,9 @@
  * @module ui/editorui/editorui
  */
 /* globals console */
-import ComponentFactory from '../componentfactory';
-import TooltipManager from '../tooltipmanager';
-import PoweredBy from './poweredby';
+import ComponentFactory from '../componentfactory.js';
+import TooltipManager from '../tooltipmanager.js';
+import PoweredBy from './poweredby.js';
 import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.

package/src/editorui/editoruiview.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module ui/editorui/editoruiview
  */
-import View from '../view';
-import BodyCollection from './bodycollection';
-import type EditableUIView from '../editableui/editableuiview';
+import View from '../view.js';
+import BodyCollection from './bodycollection.js';
+import type EditableUIView from '../editableui/editableuiview.js';
 import type { Locale, LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/editorui/editorui.css';
 /**

package/src/editorui/editoruiview.js

@@ -5,8 +5,8 @@
 /**
  * @module ui/editorui/editoruiview
  */
-import View from '../view';
-import BodyCollection from './bodycollection';
+import View from '../view.js';
+import BodyCollection from './bodycollection.js';
 import '../../theme/components/editorui/editorui.css';
 /**
  * The editor UI view class. Base class for the editor main views.

package/src/editorui/poweredby.js

@@ -3,9 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { Rect, DomEmitterMixin, findClosestScrollableAncestor, verifyLicense } from '@ckeditor/ckeditor5-utils';
-import BalloonPanelView from '../panel/balloon/balloonpanelview';
-import IconView from '../icon/iconview';
-import View from '../view';
+import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
+import IconView from '../icon/iconview.js';
+import View from '../view.js';
 import { throttle } from 'lodash-es';
 import poweredByIcon from '../../theme/icons/project-logo.svg';
 const ICON_WIDTH = 53;

package/src/focuscycler.d.ts

@@ -6,8 +6,8 @@
  * @module ui/focuscycler
  */
 import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import type View from './view';
-import type ViewCollection from './viewcollection';
+import type View from './view.js';
+import type ViewCollection from './viewcollection.js';
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
  * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the

package/src/formheader/formheaderview.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module ui/formheader/formheaderview
  */
-import View from '../view';
-import type ViewCollection from '../viewcollection';
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/formheader/formheader.css';
 /**

package/src/formheader/formheaderview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/formheader/formheaderview
  */
-import View from '../view';
+import View from '../view.js';
 import '../../theme/components/formheader/formheader.css';
 /**
  * The class component representing a form header view. It should be used in more advanced forms to

package/src/icon/iconview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/icon/iconview
  */
-import View from '../view';
+import View from '../view.js';
 import '../../theme/components/icon/icon.css';
 /**
  * The icon view class.

package/src/icon/iconview.js

@@ -6,7 +6,7 @@
 /**
  * @module ui/icon/iconview
  */
-import View from '../view';
+import View from '../view.js';
 import '../../theme/components/icon/icon.css';
 /**
  * The icon view class.

package/src/iframe/iframeview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/iframe/iframeview
  */
-import View from '../view';
+import View from '../view.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The iframe view class.

package/src/iframe/iframeview.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/iframe/iframeview
  */
-import View from '../view';
+import View from '../view.js';
 /**
  * The iframe view class.
  *