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

package/src/formrow/formrowview.js

@@ -1,56 +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/formrow/formrowview
- */
-import { View } from '../view.js';
-import { toArray } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/formrow/formrow.css';
-/**
- * The class representing a single row in a form,
- */
-export class FormRowView extends View {
-    /**
-     * A collection of row items (buttons, dropdowns, etc.).
-     */
-    children;
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale, options = {}) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('class', [
-            'ck',
-            'ck-form__row',
-            ...toArray(options.class || [])
-        ]);
-        this.children = this.createCollection();
-        if (options.children) {
-            options.children.forEach(child => this.children.add(child));
-        }
-        this.set('_role', null);
-        this.set('_ariaLabelledBy', null);
-        if (options.labelView) {
-            this.set({
-                _role: 'group',
-                _ariaLabelledBy: options.labelView.id
-            });
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: bind.to('class', classes => classes.join(' ')),
-                role: bind.to('_role'),
-                'aria-labelledby': bind.to('_ariaLabelledBy')
-            },
-            children: this.children
-        });
-    }
-}

package/src/highlightedtext/buttonlabelwithhighlightview.js

@@ -1,31 +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 { HighlightedTextView } from './highlightedtextview.js';
-/**
- * A button label view that can highlight a text fragment.
- */
-export class ButtonLabelWithHighlightView extends HighlightedTextView {
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        this.set({
-            style: undefined,
-            text: undefined,
-            id: undefined
-        });
-        const bind = this.bindTemplate;
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-button__label'
-                ],
-                style: bind.to('style'),
-                id: bind.to('id')
-            }
-        });
-    }
-}

package/src/highlightedtext/highlightedtextview.js

@@ -1,102 +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/highlightedtext/highlightedtextview
- */
-import { View } from '../view.js';
-import { escape } from 'es-toolkit/compat';
-import '../../theme/components/highlightedtext/highlightedtext.css';
-/**
- * A class representing a view that displays a text which subset can be highlighted using the
- * {@link #highlightText} method.
- */
-export class HighlightedTextView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        this.set('text', undefined);
-        this.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: ['ck', 'ck-highlighted-text']
-            }
-        });
-        this.on('render', () => {
-            // Classic setTemplate binding for #text will not work because highlightText() replaces the
-            // pre-rendered DOM text node new a new one (and <mark> elements).
-            this.on('change:text', () => {
-                this._updateInnerHTML(this.text);
-            });
-            this._updateInnerHTML(this.text);
-        });
-    }
-    /**
-     * Highlights view's {@link #text} according to the specified `RegExp`. If the passed RegExp is `null`, the
-     * highlighting is removed
-     *
-     * @param regExp
-     */
-    highlightText(regExp) {
-        this._updateInnerHTML(markText(this.text || '', regExp));
-    }
-    /**
-     * Updates element's `innerHTML` with the passed content.
-     */
-    _updateInnerHTML(newInnerHTML) {
-        this.element.innerHTML = newInnerHTML || '';
-    }
-}
-/**
- * Replaces `regExp` occurrences with `<mark>` tags in a text.
- *
- * @param text A text to get marked.
- * @param regExp An optional `RegExp`. If not passed, this is a pass-through function.
- * @returns A text with `RegExp` occurrences marked by `<mark>`.
- */
-function markText(text, regExp) {
-    if (!regExp) {
-        return escape(text);
-    }
-    const textParts = [];
-    let lastMatchEnd = 0;
-    let matchInfo = regExp.exec(text);
-    // Iterate over all matches and create an array of text parts. The idea is to mark which parts are query matches
-    // so that later on they can be highlighted.
-    while (matchInfo !== null) {
-        const curMatchStart = matchInfo.index;
-        // Detect if there was something between last match and this one.
-        if (curMatchStart !== lastMatchEnd) {
-            textParts.push({
-                text: text.substring(lastMatchEnd, curMatchStart),
-                isMatch: false
-            });
-        }
-        textParts.push({
-            text: matchInfo[0],
-            isMatch: true
-        });
-        lastMatchEnd = regExp.lastIndex;
-        matchInfo = regExp.exec(text);
-    }
-    // Your match might not be the last part of a string. Be sure to add any plain text following the last match.
-    if (lastMatchEnd !== text.length) {
-        textParts.push({
-            text: text.substring(lastMatchEnd),
-            isMatch: false
-        });
-    }
-    const outputHtml = textParts
-        // The entire text should be escaped.
-        .map(part => {
-        part.text = escape(part.text);
-        return part;
-    })
-        // Only matched text should be wrapped with HTML mark element.
-        .map(part => part.isMatch ? `<mark>${part.text}</mark>` : part.text)
-        .join('');
-    return outputHtml;
-}

package/src/highlightedtext/labelwithhighlightview.js

@@ -1,37 +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/highlightedtext/labelwithhighlightview
- */
-import { HighlightedTextView } from './highlightedtextview.js';
-import { uid } from '@ckeditor/ckeditor5-utils';
-/**
- * A label view that can highlight a text fragment.
- */
-export class LabelWithHighlightView extends HighlightedTextView {
-    /**
-     * @inheritDoc
-     */
-    id;
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        this.set('for', undefined);
-        const bind = this.bindTemplate;
-        this.id = `ck-editor__label_${uid()}`;
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-label'
-                ],
-                id: this.id,
-                for: bind.to('for')
-            }
-        });
-    }
-}

package/src/icon/iconview.js

@@ -1,123 +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/icon/iconview
- */
-import { View } from '../view.js';
-import { CKEditorError } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/icon/icon.css';
-/**
- * The icon view class.
- */
-export class IconView extends View {
-    /**
-     * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
-     * 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.
-     */
-    static presentationalAttributeNames = [
-        'alignment-baseline', 'baseline-shift', 'clip-path', 'clip-rule', 'color', 'color-interpolation',
-        'color-interpolation-filters', 'color-rendering', 'cursor', 'direction', 'display', 'dominant-baseline', 'fill', 'fill-opacity',
-        'fill-rule', 'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style',
-        'font-variant', 'font-weight', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start',
-        'mask', 'opacity', 'overflow', 'paint-order', 'pointer-events', 'shape-rendering', 'stop-color', 'stop-opacity', 'stroke',
-        'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width',
-        'text-anchor', 'text-decoration', 'text-overflow', 'text-rendering', 'transform', 'unicode-bidi', 'vector-effect',
-        'visibility', 'white-space', 'word-spacing', 'writing-mode'
-    ];
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        const bind = this.bindTemplate;
-        this.set('content', '');
-        this.set('viewBox', '0 0 20 20');
-        this.set('fillColor', '');
-        this.set('isColorInherited', true);
-        this.set('isVisible', true);
-        this.setTemplate({
-            tag: 'svg',
-            ns: 'http://www.w3.org/2000/svg',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-icon',
-                    bind.if('isVisible', 'ck-hidden', value => !value),
-                    // Exclude icon internals from the CSS reset to allow rich (non-monochromatic) icons
-                    // (https://github.com/ckeditor/ckeditor5/issues/12599).
-                    'ck-reset_all-excluded',
-                    // The class to remove the dynamic color inheritance is toggleable
-                    // (https://github.com/ckeditor/ckeditor5/issues/12599).
-                    bind.if('isColorInherited', 'ck-icon_inherit-color')
-                ],
-                viewBox: bind.to('viewBox'),
-                'aria-hidden': true
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this._updateXMLContent();
-        this._colorFillPaths();
-        // This is a hack for lack of innerHTML binding.
-        // See: https://github.com/ckeditor/ckeditor5-ui/issues/99.
-        this.on('change:content', () => {
-            this._updateXMLContent();
-            this._colorFillPaths();
-        });
-        this.on('change:fillColor', () => {
-            this._colorFillPaths();
-        });
-    }
-    /**
-     * Updates the {@link #element} with the value of {@link #content}.
-     */
-    _updateXMLContent() {
-        if (this.content) {
-            const parsed = new DOMParser().parseFromString(this.content.trim(), 'image/svg+xml');
-            const svg = parsed.querySelector('svg');
-            if (!svg) {
-                /**
-                 * The provided icon content is not a valid SVG.
-                 *
-                 * @error ui-iconview-invalid-svg
-                 */
-                throw new CKEditorError('ui-iconview-invalid-svg', this);
-            }
-            const viewBox = svg.getAttribute('viewBox');
-            if (viewBox) {
-                this.viewBox = viewBox;
-            }
-            // Preserve presentational attributes of the <svg> element from the source.
-            // They can affect rendering of the entire icon (https://github.com/ckeditor/ckeditor5/issues/12597).
-            for (const { name, value } of Array.from(svg.attributes)) {
-                if (IconView.presentationalAttributeNames.includes(name)) {
-                    this.element.setAttribute(name, value);
-                }
-            }
-            while (this.element.firstChild) {
-                this.element.removeChild(this.element.firstChild);
-            }
-            while (svg.childNodes.length > 0) {
-                this.element.appendChild(svg.childNodes[0]);
-            }
-        }
-    }
-    /**
-     * Fills all child `path.ck-icon__fill` with the `#fillColor`.
-     */
-    _colorFillPaths() {
-        if (this.fillColor) {
-            this.element.querySelectorAll('.ck-icon__fill').forEach(path => {
-                path.style.fill = this.fillColor;
-            });
-        }
-    }
-}

package/src/iframe/iframeview.js

@@ -1,63 +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/iframe/iframeview
- */
-import { View } from '../view.js';
-/**
- * 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 class IframeView extends View {
-    /**
-     * Creates a new instance of the iframe view.
-     *
-     * @param locale The locale instance.
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'iframe',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset_all'
-                ],
-                // It seems that we need to allow scripts in order to be able to listen to events.
-                // TODO: Research that. Perhaps the src must be set?
-                sandbox: 'allow-same-origin allow-scripts'
-            },
-            on: {
-                load: bind.to('loaded')
-            }
-        });
-    }
-    /**
-     * 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() {
-        return new Promise(resolve => {
-            this.on('loaded', resolve);
-            return super.render();
-        });
-    }
-}

package/src/index.js

@@ -1,132 +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
- */
-// This import must be at the top to ensure that `globals.css` is imported first
-export { View } from './view.js';
-export { AriaLiveAnnouncerPoliteness, AriaLiveAnnouncer, AriaLiveAnnouncerView, AriaLiveAnnouncerRegionView } from './arialiveannouncer.js';
-export { clickOutsideHandler } from './bindings/clickoutsidehandler.js';
-export { CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin.js';
-export { DraggableViewMixin } from './bindings/draggableviewmixin.js';
-export { submitHandler } from './bindings/submithandler.js';
-export { addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid.js';
-export { AccessibilityHelpContentView } from './editorui/accessibilityhelp/accessibilityhelpcontentview.js';
-export { AccessibilityHelp } from './editorui/accessibilityhelp/accessibilityhelp.js';
-export { BodyCollection } from './editorui/bodycollection.js';
-export { PoweredBy } from './editorui/poweredby.js';
-export { Badge } from './badge/badge.js';
-export { ButtonView } from './button/buttonview.js';
-export { ButtonLabelView } from './button/buttonlabelview.js';
-export { SwitchButtonView } from './button/switchbuttonview.js';
-export { ListItemButtonView } from './button/listitembuttonview.js';
-export { FileDialogButtonView, FileDialogListItemButtonView, FileDialogViewMixin } from './button/filedialogbuttonview.js';
-export { CollapsibleView } from './collapsible/collapsibleview.js';
-export { getLocalizedColorOptions, normalizeColorOptions, normalizeSingleColorDefinition } from './colorgrid/utils.js';
-export { ColorGridView } from './colorgrid/colorgridview.js';
-export { ColorTileView } from './colorgrid/colortileview.js';
-export { ColorPickerView, SliderView, ColorPickerInputRowView } from './colorpicker/colorpickerview.js';
-export { ColorSelectorView } from './colorselector/colorselectorview.js';
-export { DocumentColorCollection } from './colorselector/documentcolorcollection.js';
-export { ColorGridsFragmentView } from './colorselector/colorgridsfragmentview.js';
-export { ColorPickerFragmentView } from './colorselector/colorpickerfragmentview.js';
-export { ComponentFactory } from './componentfactory.js';
-export { Dialog } from './dialog/dialog.js';
-export { DialogView, DialogViewPosition } from './dialog/dialogview.js';
-export { DialogActionsView } from './dialog/dialogactionsview.js';
-export { DialogContentView } from './dialog/dialogcontentview.js';
-export { DropdownView } from './dropdown/dropdownview.js';
-export { DropdownPanelView } from './dropdown/dropdownpanelview.js';
-export { DropdownButtonView } from './dropdown/button/dropdownbuttonview.js';
-export { SplitButtonView } from './dropdown/button/splitbuttonview.js';
-export { createDropdown, addMenuToDropdown, addToolbarToDropdown, addListToDropdown, focusChildOnDropdownOpen } from './dropdown/utils.js';
-export { DropdownMenuPanelPositioningFunctions } from './dropdown/menu/utils.js';
-export { DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
-export { DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
-export { DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
-export { DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
-export { DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
-export { DropdownMenuButtonView } from './dropdown/menu/dropdownmenubuttonview.js';
-export { DropdownMenuNestedMenuPanelView } from './dropdown/menu/dropdownmenunestedmenupanelview.js';
-export { EditorUI } from './editorui/editorui.js';
-export { EditorUIView } from './editorui/editoruiview.js';
-export { EvaluationBadge } from './editorui/evaluationbadge.js';
-export { BoxedEditorUIView } from './editorui/boxed/boxededitoruiview.js';
-export { InlineEditableUIView } from './editableui/inline/inlineeditableuiview.js';
-export { EditableUIView } from './editableui/editableuiview.js';
-export { FormRowView } from './formrow/formrowview.js';
-export { FormHeaderView } from './formheader/formheaderview.js';
-export { FocusCycler, isViewWithFocusCycler, isFocusable } from './focuscycler.js';
-export { IconView } from './icon/iconview.js';
-export { InputBase } from './input/inputbase.js';
-export { InputView } from './input/inputview.js';
-export { InputTextView } from './inputtext/inputtextview.js';
-export { InputNumberView } from './inputnumber/inputnumberview.js';
-export { TextareaView } from './textarea/textareaview.js';
-export { IframeView } from './iframe/iframeview.js';
-export { LabelView } from './label/labelview.js';
-export { LabeledFieldView } from './labeledfield/labeledfieldview.js';
-export { createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, createLabeledDropdown } from './labeledfield/utils.js';
-export { LabeledInputView } from './labeledinput/labeledinputview.js';
-export { ListItemGroupView } from './list/listitemgroupview.js';
-export { ListItemView } from './list/listitemview.js';
-export { ListSeparatorView } from './list/listseparatorview.js';
-export { ListView } from './list/listview.js';
-export { filterGroupAndItemNames } from './search/filtergroupanditemnames.js';
-export { Notification } from './notification/notification.js';
-export { UIModel, UIModel as ViewModel // TODO: Remove after WProofReader has been adjusted.
- } from './model.js';
-export { BalloonPanelView } from './panel/balloon/balloonpanelview.js';
-export { ContextualBalloon } from './panel/balloon/contextualballoon.js';
-export { StickyPanelView } from './panel/sticky/stickypanelview.js';
-export { AutocompleteView } from './autocomplete/autocompleteview.js';
-export { SearchTextView } from './search/text/searchtextview.js';
-export { SearchResultsView } from './search/searchresultsview.js';
-export { SearchInfoView } from './search/searchinfoview.js';
-export { HighlightedTextView } from './highlightedtext/highlightedtextview.js';
-export { ButtonLabelWithHighlightView } from './highlightedtext/buttonlabelwithhighlightview.js';
-export { LabelWithHighlightView } from './highlightedtext/labelwithhighlightview.js';
-export { TooltipManager } from './tooltipmanager.js';
-export { Template } from './template.js';
-export { SpinnerView } from './spinner/spinnerview.js';
-export { ToolbarView, ItemsView } from './toolbar/toolbarview.js';
-export { ToolbarLineBreakView } from './toolbar/toolbarlinebreakview.js';
-export { ToolbarSeparatorView } from './toolbar/toolbarseparatorview.js';
-export { normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
-export { BalloonToolbar } from './toolbar/balloon/balloontoolbar.js';
-export { BlockToolbar } from './toolbar/block/blocktoolbar.js';
-export { BlockButtonView } from './toolbar/block/blockbuttonview.js';
-export { ViewCollection } from './viewcollection.js';
-export { MenuBarView } from './menubar/menubarview.js';
-export { MenuBarMenuButtonView } from './menubar/menubarmenubuttonview.js';
-export { MenuBarMenuPanelView } from './menubar/menubarmenupanelview.js';
-export { MenuBarMenuView } from './menubar/menubarmenuview.js';
-export { MenuBarMenuListView } from './menubar/menubarmenulistview.js';
-export { MenuBarMenuListItemView } from './menubar/menubarmenulistitemview.js';
-export { MenuBarMenuListItemButtonView } from './menubar/menubarmenulistitembuttonview.js';
-export { MenuBarMenuListItemFileDialogButtonView } from './menubar/menubarmenulistitemfiledialogbuttonview.js';
-export { normalizeMenuBarConfig, DefaultMenuBarItems } from './menubar/utils.js';
-// Internals
-export { preventDefault as _preventUiViewDefault } from './bindings/preventdefault.js';
-export { CheckIconHolderView as _CheckIconHolderView } from './button/listitembuttonview.js';
-export { CollapsibleView as _CollapsibleView } from './collapsible/collapsibleview.js';
-export { tryParseHexColor as _tryNormalizeHexColor } from './colorpicker/colorpickerview.js';
-export { convertColor as _convertColor } from './colorpicker/utils.js';
-export { convertToHex as _convertColorToHex } from './colorpicker/utils.js';
-export { registerCustomElement as _registerCustomElement } from './colorpicker/utils.js';
-export { DropdownRootMenuBehaviors as _DropdownRootMenuBehaviors } from './dropdown/menu/dropdownmenubehaviors.js';
-export { DropdownMenuBehaviors as _DropdownMenuBehaviors } from './dropdown/menu/dropdownmenubehaviors.js';
-export { MenuBarBehaviors as _MenuBarBehaviors } from './menubar/utils.js';
-export { MenuBarMenuBehaviors as _MenuBarMenuBehaviors } from './menubar/utils.js';
-export { MenuBarMenuViewPanelPositioningFunctions as _MenuBarMenuViewPanelPositioningFunctions } from './menubar/utils.js';
-export { processMenuBarConfig as _processMenuBarConfig } from './menubar/utils.js';
-export { RotatorView as _ContextualBalloonRotatorView } from './panel/balloon/contextualballoon.js';
-export { SearchInfoView as _SearchInfoView } from './search/searchinfoview.js';
-export { SearchTextQueryView as _SearchTextQueryView } from './search/text/searchtextqueryview.js';
-export { TemplateBinding as _TemplateBinding } from './template.js';
-export { TemplateToBinding as _TemplateToBinding } from './template.js';
-export { TemplateIfBinding as _TemplateIfBinding } from './template.js';
-export { NESTED_TOOLBAR_ICONS } from './toolbar/toolbarview.js';
-import './augmentation.js';

package/src/input/inputbase.js

@@ -1,119 +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/input/inputbase
- */
-import { View } from '../view.js';
-import { FocusTracker } from '@ckeditor/ckeditor5-utils';
-/**
- * The base input view class.
- */
-export class InputBase extends View {
-    /**
-     * Stores information about the editor UI focus and propagates it so various plugins and components
-     * are unified as a focus group.
-     */
-    focusTracker;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.set('value', undefined);
-        this.set('id', undefined);
-        this.set('placeholder', undefined);
-        this.set('tabIndex', undefined);
-        this.set('isReadOnly', false);
-        this.set('hasError', false);
-        this.set('ariaDescribedById', undefined);
-        this.set('ariaLabel', undefined);
-        this.focusTracker = new FocusTracker();
-        this.bind('isFocused').to(this.focusTracker);
-        this.set('isEmpty', true);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'input',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-input',
-                    bind.if('isFocused', 'ck-input_focused'),
-                    bind.if('isEmpty', 'ck-input-text_empty'),
-                    bind.if('hasError', 'ck-error')
-                ],
-                id: bind.to('id'),
-                placeholder: bind.to('placeholder'),
-                tabindex: bind.to('tabIndex'),
-                readonly: bind.to('isReadOnly'),
-                'aria-invalid': bind.if('hasError', true),
-                'aria-describedby': bind.to('ariaDescribedById'),
-                'aria-label': bind.to('ariaLabel')
-            },
-            on: {
-                input: bind.to((...args) => {
-                    this.fire('input', ...args);
-                    this._updateIsEmpty();
-                }),
-                change: bind.to(this._updateIsEmpty.bind(this))
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.focusTracker.add(this.element);
-        this._setDomElementValue(this.value);
-        this._updateIsEmpty();
-        // Bind `this.value` to the DOM element's value.
-        // We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
-        this.on('change:value', (evt, name, value) => {
-            this._setDomElementValue(value);
-            this._updateIsEmpty();
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-    }
-    /**
-     * Moves the focus to the input and selects the value.
-     */
-    select() {
-        this.element.select();
-    }
-    /**
-     * Focuses the input.
-     */
-    focus() {
-        this.element.focus();
-    }
-    /**
-     * Resets the value of the input
-     */
-    reset() {
-        this.value = this.element.value = '';
-        this._updateIsEmpty();
-    }
-    /**
-     * Updates the {@link #isEmpty} property value on demand.
-     */
-    _updateIsEmpty() {
-        this.isEmpty = isInputElementEmpty(this.element);
-    }
-    /**
-     * Sets the `value` property of the {@link #element DOM element} on demand.
-     */
-    _setDomElementValue(value) {
-        this.element.value = (!value && value !== 0) ? '' : value;
-    }
-}
-function isInputElementEmpty(domElement) {
-    return !domElement.value;
-}