@ckeditor/ckeditor5-ui 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/panel/sticky/stickypanelview.js

@@ -1,246 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/panel/sticky/stickypanelview
- */
-import { View } from '../../view.js';
-import { Template } from '../../template.js';
-import { Rect, toUnit, getVisualViewportOffset, global } from '@ckeditor/ckeditor5-utils';
-// @if CK_DEBUG_STICKYPANEL // const {
-// @if CK_DEBUG_STICKYPANEL // 	default: RectDrawer,
-// @if CK_DEBUG_STICKYPANEL // 	diagonalStylesBlack
-// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
-import '../../../theme/components/panel/stickypanel.css';
-const toPx = /* #__PURE__ */ toUnit('px');
-/**
- * The sticky panel view class.
- */
-export class StickyPanelView extends View {
-    /**
-     * Collection of the child views which creates balloon panel contents.
-     */
-    content;
-    /**
-     * The panel which accepts children into {@link #content} collection.
-     * Also an element which is positioned when {@link #isSticky}.
-     */
-    contentPanelElement;
-    /**
-     * A dummy element which visually fills the space as long as the
-     * actual panel is sticky. It prevents flickering of the UI.
-     */
-    _contentPanelPlaceholder;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('isActive', false);
-        this.set('isSticky', false);
-        this.set('limiterElement', null);
-        this.set('limiterBottomOffset', 50);
-        this.set('viewportTopOffset', 0);
-        this.set('_marginLeft', null);
-        this.set('_isStickyToTheBottomOfLimiter', false);
-        this.set('_stickyTopOffset', null);
-        this.set('_stickyBottomOffset', null);
-        this.content = this.createCollection();
-        this._contentPanelPlaceholder = new Template({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-sticky-panel__placeholder'
-                ],
-                style: {
-                    display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),
-                    height: bind.to('isSticky', isSticky => {
-                        return isSticky ? toPx(this._contentPanelRect.height) : null;
-                    })
-                }
-            }
-        }).render();
-        this.contentPanelElement = new Template({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-sticky-panel__content',
-                    // Toggle class of the panel when "sticky" state changes in the view.
-                    bind.if('isSticky', 'ck-sticky-panel__content_sticky'),
-                    bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')
-                ],
-                style: {
-                    width: bind.to('isSticky', isSticky => {
-                        return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;
-                    }),
-                    top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),
-                    bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),
-                    marginLeft: bind.to('_marginLeft')
-                }
-            },
-            children: this.content
-        }).render();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-sticky-panel'
-                ]
-            },
-            children: [
-                this._contentPanelPlaceholder,
-                this.contentPanelElement
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Check if the panel should go into the sticky state immediately.
-        this.checkIfShouldBeSticky();
-        // Update sticky state of the panel as the window and ancestors are being scrolled.
-        this.listenTo(global.document, 'scroll', () => {
-            this.checkIfShouldBeSticky();
-        }, { useCapture: true });
-        // Synchronize with `model.isActive` because sticking an inactive panel is pointless.
-        this.listenTo(this, 'change:isActive', () => {
-            this.checkIfShouldBeSticky();
-        });
-        if (global.window.visualViewport) {
-            this.listenTo(global.window.visualViewport, 'scroll', () => {
-                this.checkIfShouldBeSticky();
-            });
-            this.listenTo(global.window.visualViewport, 'resize', () => {
-                this.checkIfShouldBeSticky();
-            });
-        }
-    }
-    /**
-     * Analyzes the environment to decide whether the panel should be sticky or not.
-     * Then handles the positioning of the panel.
-     */
-    checkIfShouldBeSticky() {
-        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
-        if (!this.limiterElement || !this.isActive) {
-            this._unstick();
-            return;
-        }
-        const limiterRect = new Rect(this.limiterElement);
-        let visibleLimiterRect = limiterRect.getVisible();
-        if (visibleLimiterRect) {
-            const windowRect = new Rect(global.window);
-            windowRect.top += this.viewportTopOffset;
-            windowRect.height -= this.viewportTopOffset;
-            visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
-        }
-        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = getVisualViewportOffset();
-        limiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
-        if (visibleLimiterRect) {
-            visibleLimiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
-        }
-        // Stick the panel only if
-        // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
-        // * and the limiter's top edge is above the visible ancestors' top edge.
-        if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
-            // Check if there's a change the panel can be sticky to the bottom of the limiter.
-            if (this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.height) {
-                const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
-                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
-                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
-                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
-                // @if CK_DEBUG_STICKYPANEL // } );
-                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
-                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
-                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset',
-                // @if CK_DEBUG_STICKYPANEL // 	{ visualViewportOrigin: true }
-                // @if CK_DEBUG_STICKYPANEL // );
-                // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
-                // move upwards if there's not enough space for it.
-                // To avoid toolbar flickering we are adding 1 for potential style change (sticky has all borders set,
-                // non-sticky lacks bottom border).
-                if (this._contentPanelRect.height + stickyBottomOffset + 1 < limiterRect.height) {
-                    this._stickToBottomOfLimiter(stickyBottomOffset);
-                }
-                else {
-                    this._unstick();
-                }
-            }
-            else if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                this._stickToTopOfAncestors(visibleLimiterRect.top);
-            }
-            else {
-                this._unstick();
-            }
-        }
-        else {
-            this._unstick();
-        }
-        // @if CK_DEBUG_STICKYPANEL // console.clear();
-        // @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );
-        // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
-        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
-        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
-        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
-        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
-        // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
-        // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
-        // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)', zIndex: 2000 },
-        // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect',
-        // @if CK_DEBUG_STICKYPANEL // 		{ visualViewportOrigin: true }
-        // @if CK_DEBUG_STICKYPANEL // 	);
-        // @if CK_DEBUG_STICKYPANEL // }
-    }
-    /**
-     * Sticks the panel at the given CSS `top` offset.
-     *
-     * @private
-     * @param topOffset
-     */
-    _stickToTopOfAncestors(topOffset) {
-        this.isSticky = true;
-        this._isStickyToTheBottomOfLimiter = false;
-        this._stickyTopOffset = topOffset;
-        this._stickyBottomOffset = null;
-        this._marginLeft = toPx(-global.window.scrollX + getVisualViewportOffset().left);
-    }
-    /**
-     * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
-     *
-     * @private
-     * @param stickyBottomOffset
-     */
-    _stickToBottomOfLimiter(stickyBottomOffset) {
-        this.isSticky = true;
-        this._isStickyToTheBottomOfLimiter = true;
-        this._stickyTopOffset = null;
-        this._stickyBottomOffset = stickyBottomOffset;
-        this._marginLeft = toPx(-global.window.scrollX + getVisualViewportOffset().left);
-    }
-    /**
-     * Unsticks the panel putting it back to its original position.
-     *
-     * @private
-     */
-    _unstick() {
-        this.isSticky = false;
-        this._isStickyToTheBottomOfLimiter = false;
-        this._stickyTopOffset = null;
-        this._stickyBottomOffset = null;
-        this._marginLeft = null;
-    }
-    /**
-     * Returns the bounding rect of the {@link #contentPanelElement}.
-     *
-     * @private
-     */
-    get _contentPanelRect() {
-        return new Rect(this.contentPanelElement);
-    }
-}

package/src/search/filteredview.js

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

package/src/search/filtergroupanditemnames.js

@@ -1,38 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * A filter function that returns matching item and group names in the list view.
- */
-export function filterGroupAndItemNames(regExp, items) {
-    let totalItemsCount = 0;
-    let resultsCount = 0;
-    for (const groupView of items) {
-        const group = groupView;
-        const groupItems = group.items;
-        const isGroupLabelMatching = regExp && !!group.label.match(regExp);
-        group.labelView.highlightText(isGroupLabelMatching ? regExp : null);
-        for (const listItemView of groupItems) {
-            const buttonView = listItemView.children.first;
-            const labelView = buttonView.labelView;
-            if (!regExp) {
-                listItemView.isVisible = true;
-                labelView.highlightText(null);
-            }
-            else {
-                const isItemLabelMatching = !!buttonView.label.match(regExp);
-                labelView.highlightText(isItemLabelMatching ? regExp : null);
-                listItemView.isVisible = isGroupLabelMatching || isItemLabelMatching;
-            }
-        }
-        const visibleInGroupCount = groupItems.filter(listItemView => listItemView.isVisible).length;
-        totalItemsCount += group.items.length;
-        resultsCount += isGroupLabelMatching ? group.items.length : visibleInGroupCount;
-        group.isVisible = isGroupLabelMatching || !!visibleInGroupCount;
-    }
-    return {
-        resultsCount,
-        totalItemsCount
-    };
-}

package/src/search/searchinfoview.js

@@ -1,59 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { View } from '../view.js';
-/**
- * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
- *
- * @internal
- */
-export class SearchInfoView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        const bind = this.bindTemplate;
-        this.set({
-            isVisible: false,
-            primaryText: '',
-            secondaryText: ''
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-search__info',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ],
-                tabindex: -1
-            },
-            children: [
-                {
-                    tag: 'span',
-                    children: [
-                        {
-                            text: [bind.to('primaryText')]
-                        }
-                    ]
-                },
-                {
-                    tag: 'span',
-                    children: [
-                        {
-                            text: [bind.to('secondaryText')]
-                        }
-                    ]
-                }
-            ]
-        });
-    }
-    /**
-     * Focuses the view
-     */
-    focus() {
-        this.element.focus();
-    }
-}

package/src/search/searchresultsview.js

@@ -1,83 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/search/searchresultsview
- */
-import { View } from '../view.js';
-import { FocusTracker } from '@ckeditor/ckeditor5-utils';
-import { FocusCycler } from '../focuscycler.js';
-/**
- * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
- */
-export class SearchResultsView extends View {
-    /**
-     * Tracks information about the DOM focus in the view.
-     *
-     * @readonly
-     */
-    focusTracker;
-    /**
-     * The collection of the child views inside of the list item {@link #element}.
-     *
-     * @readonly
-     */
-    children;
-    /**
-     * Provides the focus management (keyboard navigation) in the view.
-     *
-     * @readonly
-     */
-    _focusCycler;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.children = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-search__results'
-                ],
-                tabindex: -1
-            },
-            children: this.children
-        });
-        this._focusCycler = new FocusCycler({
-            focusables: this.children,
-            focusTracker: this.focusTracker
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        for (const child of this.children) {
-            this.focusTracker.add(child.element);
-        }
-    }
-    /**
-     * Focuses the view.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the first child view.
-     */
-    focusFirst() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the last child view.
-     */
-    focusLast() {
-        this._focusCycler.focusLast();
-    }
-}

package/src/search/text/searchtextqueryview.js

@@ -1,87 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/search/text/searchtextqueryview
- */
-import { IconCancel, IconLoupe } from '@ckeditor/ckeditor5-icons';
-import { ButtonView } from '../../button/buttonview.js';
-import { IconView } from '../../icon/iconview.js';
-import { LabeledFieldView } from '../../labeledfield/labeledfieldview.js';
-import { createLabeledInputText } from '../../labeledfield/utils.js';
-/**
- * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
- *
- * @internal
- * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
- */
-export class SearchTextQueryView extends LabeledFieldView {
-    /**
-     * The loupe icon displayed next to the {@link #fieldView}.
-     */
-    iconView;
-    /**
-     * The button that clears and focuses the {@link #fieldView}.
-     */
-    resetButtonView;
-    /**
-     * A reference to the view configuration.
-     */
-    _viewConfig;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, config) {
-        const t = locale.t;
-        const viewConfig = Object.assign({}, {
-            showResetButton: true,
-            showIcon: true,
-            creator: createLabeledInputText
-        }, config);
-        super(locale, viewConfig.creator);
-        this.label = config.label;
-        this._viewConfig = viewConfig;
-        if (this._viewConfig.showIcon) {
-            this.iconView = new IconView();
-            this.iconView.content = IconLoupe;
-            this.fieldWrapperChildren.add(this.iconView, 0);
-            this.extendTemplate({
-                attributes: {
-                    class: 'ck-search__query_with-icon'
-                }
-            });
-        }
-        if (this._viewConfig.showResetButton) {
-            this.resetButtonView = new ButtonView(locale);
-            this.resetButtonView.set({
-                label: t('Clear'),
-                icon: IconCancel,
-                class: 'ck-search__reset',
-                isVisible: false,
-                tooltip: true
-            });
-            this.resetButtonView.on('execute', () => {
-                this.reset();
-                this.focus();
-                this.fire('reset');
-            });
-            this.resetButtonView.bind('isVisible').to(this.fieldView, 'isEmpty', isEmpty => !isEmpty);
-            this.fieldWrapperChildren.add(this.resetButtonView);
-            this.extendTemplate({
-                attributes: {
-                    class: 'ck-search__query_with-reset'
-                }
-            });
-        }
-    }
-    /**
-     * Resets the search field to its default state.
-     */
-    reset() {
-        this.fieldView.reset();
-        if (this._viewConfig.showResetButton) {
-            this.resetButtonView.isVisible = false;
-        }
-    }
-}