@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/src/viewcollection.js

@@ -0,0 +1,206 @@
+/**
+ * @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/viewcollection
+ */
+import { CKEditorError, Collection } from '@ckeditor/ckeditor5-utils';
+/**
+ * Collects {@link module:ui/view~View} instances.
+ *
+ * ```ts
+ * const parentView = new ParentView( locale );
+ * const collection = new ViewCollection( locale );
+ *
+ * collection.setParent( parentView.element );
+ *
+ * const viewA = new ChildView( locale );
+ * const viewB = new ChildView( locale );
+ * ```
+ *
+ * View collection renders and manages view {@link module:ui/view~View#element elements}:
+ *
+ * ```ts
+ * collection.add( viewA );
+ * collection.add( viewB );
+ *
+ * console.log( parentView.element.firsChild ); // -> viewA.element
+ * console.log( parentView.element.lastChild ); // -> viewB.element
+ * ```
+ *
+ * It {@link module:ui/viewcollection~ViewCollection#delegate propagates} DOM events too:
+ *
+ * ```ts
+ * // Delegate #click and #keydown events from viewA and viewB to the parentView.
+ * collection.delegate( 'click' ).to( parentView );
+ *
+ * parentView.on( 'click', ( evt ) => {
+ * 	console.log( `${ evt.source } has been clicked.` );
+ * } );
+ *
+ * // This event will be delegated to the parentView.
+ * viewB.fire( 'click' );
+ * ```
+ *
+ * **Note**: A view collection can be used directly in the {@link module:ui/template~TemplateDefinition definition}
+ * of a {@link module:ui/template~Template template}.
+ */
+export default class ViewCollection extends Collection {
+    /**
+     * Creates a new instance of the {@link module:ui/viewcollection~ViewCollection}.
+     *
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(initialItems = []) {
+        super(initialItems, {
+            // An #id Number attribute should be legal and not break the `ViewCollection` instance.
+            // https://github.com/ckeditor/ckeditor5-ui/issues/93
+            idProperty: 'viewUid'
+        });
+        // Handle {@link module:ui/view~View#element} in DOM when a new view is added to the collection.
+        this.on('add', (evt, view, index) => {
+            this._renderViewIntoCollectionParent(view, index);
+        });
+        // Handle {@link module:ui/view~View#element} in DOM when a view is removed from the collection.
+        this.on('remove', (evt, view) => {
+            if (view.element && this._parentElement) {
+                view.element.remove();
+            }
+        });
+        this._parentElement = null;
+    }
+    /**
+     * Destroys the view collection along with child views.
+     * See the view {@link module:ui/view~View#destroy} method.
+     */
+    destroy() {
+        this.map(view => view.destroy());
+    }
+    /**
+     * Sets the parent HTML element of this collection. When parent is set, {@link #add adding} and
+     * {@link #remove removing} views in the collection synchronizes their
+     * {@link module:ui/view~View#element elements} in the parent element.
+     *
+     * @param element A new parent element.
+     */
+    setParent(elementOrDocFragment) {
+        this._parentElement = elementOrDocFragment;
+        // Take care of the initial collection items passed to the constructor.
+        for (const view of this) {
+            this._renderViewIntoCollectionParent(view);
+        }
+    }
+    /**
+     * Delegates selected events coming from within views in the collection to any
+     * {@link module:utils/emittermixin~Emitter}.
+     *
+     * For the following views and collection:
+     *
+     * ```ts
+     * const viewA = new View();
+     * const viewB = new View();
+     * const viewC = new View();
+     *
+     * const views = parentView.createCollection();
+     *
+     * views.delegate( 'eventX' ).to( viewB );
+     * views.delegate( 'eventX', 'eventY' ).to( viewC );
+     *
+     * views.add( viewA );
+     * ```
+     *
+     * the `eventX` is delegated (fired by) `viewB` and `viewC` along with `customData`:
+     *
+     * ```ts
+     * viewA.fire( 'eventX', customData );
+     * ```
+     *
+     * and `eventY` is delegated (fired by) `viewC` along with `customData`:
+     *
+     * ```ts
+     * viewA.fire( 'eventY', customData );
+     * ```
+     *
+     * See {@link module:utils/emittermixin~Emitter#delegate}.
+     *
+     * @param events {@link module:ui/view~View} event names to be delegated to another
+     * {@link module:utils/emittermixin~Emitter}.
+     * @returns Object with `to` property, a function which accepts the destination
+     * of {@link module:utils/emittermixin~Emitter#delegate delegated} events.
+     */
+    delegate(...events) {
+        if (!events.length || !isStringArray(events)) {
+            /**
+             * All event names must be strings.
+             *
+             * @error ui-viewcollection-delegate-wrong-events
+             */
+            throw new CKEditorError('ui-viewcollection-delegate-wrong-events', this);
+        }
+        return {
+            to: dest => {
+                // Activate delegating on existing views in this collection.
+                for (const view of this) {
+                    for (const evtName of events) {
+                        view.delegate(evtName).to(dest);
+                    }
+                }
+                // Activate delegating on future views in this collection.
+                this.on('add', (evt, view) => {
+                    for (const evtName of events) {
+                        view.delegate(evtName).to(dest);
+                    }
+                });
+                // Deactivate delegating when view is removed from this collection.
+                this.on('remove', (evt, view) => {
+                    for (const evtName of events) {
+                        view.stopDelegating(evtName, dest);
+                    }
+                });
+            }
+        };
+    }
+    /**
+     * This method {@link module:ui/view~View#render renders} a new view added to the collection.
+     *
+     * If the {@link #_parentElement parent element} of the collection is set, this method also adds
+     * the view's {@link module:ui/view~View#element} as a child of the parent in DOM at a specified index.
+     *
+     * **Note**: If index is not specified, the view's element is pushed as the last child
+     * of the parent element.
+     *
+     * @param view A new view added to the collection.
+     * @param index An index the view holds in the collection. When not specified,
+     * the view is added at the end.
+     */
+    _renderViewIntoCollectionParent(view, index) {
+        if (!view.isRendered) {
+            view.render();
+        }
+        if (view.element && this._parentElement) {
+            this._parentElement.insertBefore(view.element, this._parentElement.children[index]);
+        }
+    }
+    /**
+     * Removes a child view from the collection. If the {@link #setParent parent element} of the
+     * collection has been set, the {@link module:ui/view~View#element element} of the view is also removed
+     * in DOM, reflecting the order of the collection.
+     *
+     * See the {@link #add} method.
+     *
+     * @param subject The view to remove, its id or index in the collection.
+     * @returns The removed view.
+     */
+    remove(subject) {
+        return super.remove(subject);
+    }
+}
+/**
+ * Check if all entries of the array are of `String` type.
+ *
+ * @param arr An array to be checked.
+ */
+function isStringArray(arr) {
+    return arr.every(a => typeof a == 'string');
+}

package/theme/components/arialiveannouncer/arialiveannouncer.css

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+.ck.ck-aria-live-announcer {
+	position: absolute;
+	left: -10000px;
+	top: -10000px;
+}
+
+.ck.ck-aria-live-region-list {
+	list-style-type: none;
+}

package/theme/components/autocomplete/autocomplete.css

@@ -0,0 +1,22 @@
+/*
+ * 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
+ */
+
+.ck.ck-autocomplete {
+	position: relative;
+
+	& > .ck-search__results {
+		position: absolute;
+		z-index: var(--ck-z-panel);
+
+		&.ck-search__results_n {
+			bottom: 100%;
+		}
+
+		&.ck-search__results_s {
+			top: 100%;
+			bottom: auto;
+		}
+	}
+}

package/theme/components/button/button.css

@@ -0,0 +1,39 @@
+/*
+ * 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 "../../mixins/_unselectable.css";
+@import "../../mixins/_dir.css";
+
+.ck.ck-button,
+a.ck.ck-button {
+	@mixin ck-unselectable;
+
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	@mixin ck-dir ltr {
+		justify-content: left;
+	}
+
+	@mixin ck-dir rtl {
+		justify-content: right;
+	}
+
+	& .ck-button__label {
+		display: none;
+	}
+
+	&.ck-button_with-text {
+		& .ck-button__label {
+			display: inline-block;
+		}
+	}
+
+	/* Center the icon horizontally in a button without text. */
+	&:not(.ck-button_with-text)  {
+		justify-content: center;
+	}
+}

package/theme/components/button/listitembutton.css

@@ -0,0 +1,48 @@
+/*
+ * 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 "../../mixins/_dir.css";
+
+.ck.ck-list-item-button {
+	min-height: unset;
+	width: 100%;
+	border-radius: 0;
+
+	@mixin ck-dir ltr {
+		text-align: left;
+	}
+
+	@mixin ck-dir rtl {
+		text-align: right;
+	}
+
+	&.ck-list-item-button_toggleable {
+		@mixin ck-dir ltr {
+			padding-left: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			padding-right: var(--ck-spacing-small);
+		}
+	}
+
+	& .ck-list-item-button__check-holder {
+		display: inline-flex;
+		width: .9em;
+		height: .9em;
+
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-small);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-small);
+		}
+	}
+
+	& .ck-list-item-button__check-icon {
+		height: 100%;
+	}
+}

package/theme/components/button/switchbutton.css

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+.ck.ck-button.ck-switchbutton {
+	& .ck-button__toggle {
+		display: block;
+
+		& .ck-button__toggle__inner {
+			display: block;
+		}
+	}
+}

package/theme/components/collapsible/collapsible.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+.ck.ck-collapsible.ck-collapsible_collapsed {
+	& > .ck-collapsible__children {
+		display: none;
+	}
+}

package/theme/components/colorgrid/colorgrid.css

@@ -0,0 +1,8 @@
+/*
+ * 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
+ */
+
+.ck.ck-color-grid {
+	display: grid;
+}

package/theme/components/colorpicker/colorpicker.css

@@ -0,0 +1,34 @@
+/*
+ * 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
+ */
+
+.color-picker-hex-input {
+	width: max-content;
+
+	& .ck.ck-input {
+		min-width: unset;
+	}
+}
+
+.ck.ck-color-picker__row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+	margin: var(--ck-spacing-large) 0 0;
+	width: unset;
+
+	& .ck.ck-labeled-field-view {
+		padding-top: unset;
+	}
+
+	& .ck.ck-input-text {
+		width: unset;
+	}
+
+	& .ck-color-picker__hash-view {
+		padding-top: var(--ck-spacing-tiny);
+		padding-right: var(--ck-spacing-medium);
+	}
+}

package/theme/components/colorselector/colorselector.css

@@ -0,0 +1,35 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-color-selector {
+	/* View fragment with color grids. */
+	& .ck-color-grids-fragment {
+		& .ck-button.ck-color-selector__remove-color,
+		& .ck-button.ck-color-selector__color-picker {
+			display: flex;
+			align-items: center;
+
+			@mixin ck-dir rtl {
+				justify-content: flex-start;
+			}
+		}
+	}
+
+	/* View fragment with a color picker. */
+	& .ck-color-picker-fragment {
+		& .ck.ck-color-selector_action-bar {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+
+			& .ck-button-save,
+			& .ck-button-cancel {
+				flex: 1
+			}
+		}
+	}
+}

package/theme/components/dialog/dialog.css

@@ -0,0 +1,39 @@
+/*
+ * 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
+ */
+
+.ck.ck-dialog-overlay {
+	user-select: none;
+	overscroll-behavior: none;
+
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+
+	&.ck-dialog-overlay__transparent {
+		pointer-events: none;
+		animation: none;
+		background: none;
+	}
+}
+
+.ck.ck-dialog {
+	overscroll-behavior: none;
+	width: fit-content;
+	position: absolute;
+
+	& .ck.ck-form__header  {
+		flex-shrink: 0;
+
+		& .ck-form__header__label {
+			cursor: grab;
+		}
+	}
+
+	.ck.ck-dialog-overlay.ck-dialog-overlay__transparent & {
+		pointer-events: all;
+	}
+}

package/theme/components/dialog/dialogactions.css

@@ -0,0 +1,11 @@
+/*
+ * 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
+ */
+
+.ck.ck-dialog {
+	& .ck.ck-dialog__actions {
+		display: flex;
+		justify-content: flex-end;
+	}
+}

package/theme/components/dropdown/dropdown.css

@@ -0,0 +1,95 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-dropdown-max-width: 75vw;
+}
+
+.ck.ck-dropdown {
+	display: inline-block;
+	position: relative;
+
+	& .ck-dropdown__arrow {
+		pointer-events: none;
+		z-index: var(--ck-z-default);
+	}
+
+	/* Dropdown button should span horizontally, e.g. in vertical toolbars */
+	& .ck-button.ck-dropdown__button {
+		width: 100%;
+	}
+
+	& .ck-dropdown__panel {
+		display: none;
+		z-index: var(--ck-z-panel);
+		max-width: var(--ck-dropdown-max-width);
+
+		position: absolute;
+
+		&.ck-dropdown__panel-visible {
+			display: inline-block;
+		}
+
+		&.ck-dropdown__panel_ne,
+		&.ck-dropdown__panel_nw,
+		&.ck-dropdown__panel_n,
+		&.ck-dropdown__panel_nmw,
+		&.ck-dropdown__panel_nme {
+			bottom: 100%;
+		}
+
+		&.ck-dropdown__panel_se,
+		&.ck-dropdown__panel_sw,
+		&.ck-dropdown__panel_smw,
+		&.ck-dropdown__panel_sme,
+		&.ck-dropdown__panel_s {
+			/*
+			 * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays.
+			 * See https://github.com/ckeditor/ckeditor5/issues/1053.
+			 */
+			top: 100%;
+			bottom: auto;
+		}
+
+		&.ck-dropdown__panel_ne,
+		&.ck-dropdown__panel_se {
+			left: 0px;
+		}
+
+		&.ck-dropdown__panel_nw,
+		&.ck-dropdown__panel_sw {
+			right: 0px;
+		}
+
+		&.ck-dropdown__panel_s,
+		&.ck-dropdown__panel_n {
+			/* Positioning panels relative to the center of the button */
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		&.ck-dropdown__panel_nmw,
+		&.ck-dropdown__panel_smw {
+			/* Positioning panels relative to the middle-west of the button */
+			left: 75%;
+			transform: translateX(-75%);
+		}
+
+		&.ck-dropdown__panel_nme,
+		&.ck-dropdown__panel_sme {
+			/* Positioning panels relative to the middle-east of the button */
+			left: 25%;
+			transform: translateX(-25%);
+		}
+	}
+}
+
+/*
+ * Toolbar dropdown panels should be always above the UI (eg. other dropdown panels) from the editor's content.
+ * See https://github.com/ckeditor/ckeditor5/issues/7874
+ */
+.ck.ck-toolbar .ck-dropdown__panel {
+	z-index: calc( var(--ck-z-panel) + 1 );
+}

package/theme/components/dropdown/listdropdown.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/dropdown/menu/dropdownmenu.css

@@ -0,0 +1,8 @@
+/*
+ * 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
+ */
+
+.ck.ck-dropdown-menu-list__nested-menu {
+	display: block;
+}

package/theme/components/dropdown/menu/dropdownmenubutton.css

@@ -0,0 +1,9 @@
+/*
+ * 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
+ */
+
+.ck.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
+	pointer-events: none;
+	z-index: var(--ck-z-default);
+}

package/theme/components/dropdown/menu/dropdownmenulistitem.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/dropdown/menu/dropdownmenulistitembutton.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/dropdown/menu/dropdownmenupanel.css

@@ -0,0 +1,11 @@
+/*
+ * 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
+ */
+
+.ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
+	position: absolute;
+	max-height: 314px; /* With the default settings, this is equal to 10 menu items. */
+	overflow-y: auto;
+	z-index: calc(var(--ck-z-panel) + 1);
+}

package/theme/components/dropdown/splitbutton.css

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+.ck.ck-splitbutton {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	& .ck-splitbutton__action:focus {
+		z-index: calc(var(--ck-z-default) + 1);
+	}
+}
+

package/theme/components/dropdown/toolbardropdown.css

@@ -0,0 +1,20 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-toolbar-dropdown-max-width: 60vw;
+}
+
+.ck.ck-toolbar-dropdown > .ck-dropdown__panel {
+	/* https://github.com/ckeditor/ckeditor5/issues/5586 */
+	width: max-content;
+	max-width: var(--ck-toolbar-dropdown-max-width);
+
+	& .ck-button {
+		&:focus {
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+}