dockview-core 7.0.4 → 8.1.0

package/dist/esm/dockview/tabGroupAccent.js

@@ -1,114 +0,0 @@
-export const DEFAULT_TAB_GROUP_COLORS = [
-    { id: 'grey', value: 'var(--dv-tab-group-color-grey)', label: 'Grey' },
-    { id: 'blue', value: 'var(--dv-tab-group-color-blue)', label: 'Blue' },
-    { id: 'red', value: 'var(--dv-tab-group-color-red)', label: 'Red' },
-    {
-        id: 'yellow',
-        value: 'var(--dv-tab-group-color-yellow)',
-        label: 'Yellow',
-    },
-    { id: 'green', value: 'var(--dv-tab-group-color-green)', label: 'Green' },
-    { id: 'pink', value: 'var(--dv-tab-group-color-pink)', label: 'Pink' },
-    {
-        id: 'purple',
-        value: 'var(--dv-tab-group-color-purple)',
-        label: 'Purple',
-    },
-    { id: 'cyan', value: 'var(--dv-tab-group-color-cyan)', label: 'Cyan' },
-    {
-        id: 'orange',
-        value: 'var(--dv-tab-group-color-orange)',
-        label: 'Orange',
-    },
-];
-/**
- * Runtime palette for tab-group color accents.
- *
- * Resolves a stored `color` string to a CSS color expression, with three
- * fall-through modes:
- *   1. `id` matches an entry → entry's `value`
- *   2. `id` doesn't match → `id` itself (raw CSS literal pass-through)
- *   3. `id` is empty or undefined → undefined (caller skips assignment)
- *
- * When `enabled` is false the palette returns undefined for everything; this
- * is the `tabGroupAccent: 'off'` opt-out path.
- */
-export class TabGroupColorPalette {
-    constructor(entries, enabled = true) {
-        this._entries = entries.slice();
-        this._byId = new Map(entries.map((e) => [e.id, e]));
-        this._enabled = enabled;
-    }
-    get enabled() {
-        return this._enabled;
-    }
-    set enabled(value) {
-        this._enabled = value;
-    }
-    /**
-     * Replace the entry list in place. Used by `updateOptions` so that
-     * existing palette references (held by chips, indicators, etc.) see
-     * the new palette without needing to be re-wired.
-     */
-    setEntries(entries) {
-        this._entries = entries.slice();
-        this._byId = new Map(entries.map((e) => [e.id, e]));
-    }
-    entries() {
-        return this._entries;
-    }
-    has(id) {
-        return this._byId.has(id);
-    }
-    get(id) {
-        return this._byId.get(id);
-    }
-    /** First entry's id; used as the default when a color is unset. */
-    defaultId() {
-        var _a;
-        return (_a = this._entries[0]) === null || _a === void 0 ? void 0 : _a.id;
-    }
-    /**
-     * Resolve a stored color to its CSS value, or undefined if no value
-     * should be written (palette disabled, or color empty/undefined).
-     */
-    resolveValue(color) {
-        if (!this._enabled || !color) {
-            return undefined;
-        }
-        const entry = this._byId.get(color);
-        return entry ? entry.value : color;
-    }
-}
-let _fallbackPalette;
-/**
- * Lazy-built palette used when the accessor isn't available (test mocks,
- * isolated chip construction). Production code paths always pass a real
- * palette through.
- */
-function getFallbackPalette() {
-    _fallbackPalette !== null && _fallbackPalette !== void 0 ? _fallbackPalette : (_fallbackPalette = new TabGroupColorPalette(DEFAULT_TAB_GROUP_COLORS, true));
-    return _fallbackPalette;
-}
-/**
- * Set the `--dv-tab-group-color` custom property on `el` to the resolved
- * accent value, or remove it when the palette is disabled / color is unset.
- */
-export function applyTabGroupAccent(el, color, palette) {
-    const value = (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
-    if (value === undefined) {
-        el.style.removeProperty('--dv-tab-group-color');
-    }
-    else {
-        el.style.setProperty('--dv-tab-group-color', value);
-    }
-}
-/**
- * Return the resolved CSS color for a tab group, or undefined when the
- * palette is disabled or no color is set. Use this when you need the raw
- * value to assign to a non-custom-property style (e.g. SVG stroke,
- * backgroundColor on the indicator underline).
- */
-export function resolveTabGroupAccent(color, palette) {
-    return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
-}

package/dist/esm/dockview/theme.d.ts

@@ -1,86 +0,0 @@
-import { TabAnimation } from './options';
-export type DockviewTabGroupIndicator = 'wrap' | 'none';
-export interface DockviewTheme {
-    /**
-     *  The name of the theme
-     */
-    name: string;
-    /**
-     * The class name to apply to the theme containing the CSS variables settings.
-     */
-    className: string;
-    /**
-     * Whether the theme is light or dark. Useful for adapting panel content colors.
-     */
-    colorScheme?: 'light' | 'dark';
-    /**
-     * The gap between the groups
-     */
-    gap?: number;
-    /**
-     * The collapsed size (in px) for edge groups when using this theme.
-     * When set, this overrides the default 35px collapsed size so that
-     * collapsed edge groups match the theme's tab strip height.
-     */
-    edgeGroupCollapsedSize?: number;
-    /**
-     * The mouting position of the overlay shown when dragging a panel. `absolute`
-     * will mount the overlay to root of the dockview component whereas `relative` will mount the overlay to the group container.
-     */
-    dndOverlayMounting?: 'absolute' | 'relative';
-    /**
-     * When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.
-     */
-    dndPanelOverlay?: 'content' | 'group';
-    /**
-     * The style of the drop indicator shown when dragging a tab over another tab.
-     * `'line'` renders a thin 4px insertion strip at the tab edge (suited to bordered/spaced themes).
-     * `'fill'` renders a half-width highlighted area (suited to themes that use a background fill).
-     * Defaults to `'fill'`.
-     */
-    dndTabIndicator?: 'line' | 'fill';
-    /**
-     * The CSS value applied to `--dv-drag-over-border` when this theme is active.
-     * For example `'2px solid var(--dv-active-sash-color)'`.
-     * When unset the CSS variable is left to the stylesheet default (`none`).
-     */
-    dndOverlayBorder?: string;
-    /**
-     * Controls how tab groups are visually indicated in the tab bar.
-     *
-     * - `'wrap'` (default): Chrome-style SVG underline that wraps around the active tab
-     *   with rounded corners. Requires JavaScript for positioning and path computation.
-     * - `'none'`: Flat continuous colored bar spanning the full tab group width.
-     *   Unlike `'wrap'`, the bar does not curve around the active tab.
-     */
-    tabGroupIndicator?: DockviewTabGroupIndicator;
-    /**
-     * Controls tab drag-and-drop reorder animation style.
-     *
-     * - `"smooth"`: tabs animate smoothly during drag-and-drop reorder —
-     *   tabs slide apart to reveal the insertion gap, then animate to their
-     *   final positions on drop (Chrome-like behavior).
-     * - `"default"`: standard tab reorder behavior without animation.
-     *
-     * Defaults to `"default"`.
-     */
-    tabAnimation?: TabAnimation;
-}
-export declare const themeDark: DockviewTheme;
-export declare const themeLight: DockviewTheme;
-export declare const themeVisualStudio: DockviewTheme;
-export declare const themeAbyss: DockviewTheme;
-export declare const themeDracula: DockviewTheme;
-export declare const themeAbyssSpaced: DockviewTheme;
-export declare const themeLightSpaced: DockviewTheme;
-export declare const themeNord: DockviewTheme;
-export declare const themeNordSpaced: DockviewTheme;
-export declare const themeCatppuccinMocha: DockviewTheme;
-export declare const themeCatppuccinMochaSpaced: DockviewTheme;
-export declare const themeMonokai: DockviewTheme;
-export declare const themeSolarizedLight: DockviewTheme;
-export declare const themeSolarizedLightSpaced: DockviewTheme;
-export declare const themeGithubDark: DockviewTheme;
-export declare const themeGithubDarkSpaced: DockviewTheme;
-export declare const themeGithubLight: DockviewTheme;
-export declare const themeGithubLightSpaced: DockviewTheme;

package/dist/esm/dockview/theme.js

@@ -1,136 +0,0 @@
-export const themeDark = {
-    name: 'dark',
-    className: 'dockview-theme-dark',
-    colorScheme: 'dark',
-};
-export const themeLight = {
-    name: 'light',
-    className: 'dockview-theme-light',
-    colorScheme: 'light',
-};
-export const themeVisualStudio = {
-    name: 'visualStudio',
-    className: 'dockview-theme-vs',
-    colorScheme: 'dark',
-    // --dv-tabs-and-actions-container-height is 20px, but the VS theme applies
-    // box-sizing: content-box + border-bottom: 2px, so the rendered strip is 22px.
-    edgeGroupCollapsedSize: 22,
-};
-export const themeAbyss = {
-    name: 'abyss',
-    className: 'dockview-theme-abyss',
-    colorScheme: 'dark',
-    tabGroupIndicator: 'none',
-};
-export const themeDracula = {
-    name: 'dracula',
-    className: 'dockview-theme-dracula',
-    colorScheme: 'dark',
-};
-export const themeAbyssSpaced = {
-    name: 'abyssSpaced',
-    className: 'dockview-theme-abyss-spaced',
-    colorScheme: 'dark',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeLightSpaced = {
-    name: 'lightSpaced',
-    className: 'dockview-theme-light-spaced',
-    colorScheme: 'light',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeNord = {
-    name: 'nord',
-    className: 'dockview-theme-nord',
-    colorScheme: 'dark',
-};
-export const themeNordSpaced = {
-    name: 'nordSpaced',
-    className: 'dockview-theme-nord-spaced',
-    colorScheme: 'dark',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeCatppuccinMocha = {
-    name: 'catppuccinMocha',
-    className: 'dockview-theme-catppuccin-mocha',
-    colorScheme: 'dark',
-};
-export const themeCatppuccinMochaSpaced = {
-    name: 'catppuccinMochaSpaced',
-    className: 'dockview-theme-catppuccin-mocha-spaced',
-    colorScheme: 'dark',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeMonokai = {
-    name: 'monokai',
-    className: 'dockview-theme-monokai',
-    colorScheme: 'dark',
-};
-export const themeSolarizedLight = {
-    name: 'solarizedLight',
-    className: 'dockview-theme-solarized-light',
-    colorScheme: 'light',
-};
-export const themeSolarizedLightSpaced = {
-    name: 'solarizedLightSpaced',
-    className: 'dockview-theme-solarized-light-spaced',
-    colorScheme: 'light',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeGithubDark = {
-    name: 'githubDark',
-    className: 'dockview-theme-github-dark',
-    colorScheme: 'dark',
-};
-export const themeGithubDarkSpaced = {
-    name: 'githubDarkSpaced',
-    className: 'dockview-theme-github-dark-spaced',
-    colorScheme: 'dark',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};
-export const themeGithubLight = {
-    name: 'githubLight',
-    className: 'dockview-theme-github-light',
-    colorScheme: 'light',
-};
-export const themeGithubLightSpaced = {
-    name: 'githubLightSpaced',
-    className: 'dockview-theme-github-light-spaced',
-    colorScheme: 'light',
-    gap: 10,
-    edgeGroupCollapsedSize: 44,
-    dndOverlayMounting: 'absolute',
-    dndPanelOverlay: 'group',
-    dndTabIndicator: 'line',
-    dndOverlayBorder: '2px solid var(--dv-active-sash-color)',
-};

package/dist/esm/dockview/types.d.ts

@@ -1,53 +0,0 @@
-import { DockviewPanelApi } from '../api/dockviewPanelApi';
-import { PanelInitParameters, IPanel } from '../panel/types';
-import { DockviewApi } from '../api/component.api';
-import { Optional } from '../types';
-import { IDockviewGroupPanel } from './dockviewGroupPanel';
-import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { TabLocation } from './framework';
-export interface HeaderPartInitParameters {
-    title: string;
-}
-export interface GroupPanelPartInitParameters extends PanelInitParameters, HeaderPartInitParameters {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-}
-export interface WatermarkRendererInitParameters {
-    containerApi: DockviewApi;
-    group?: IDockviewGroupPanel;
-}
-type RendererMethodOptionalList = 'dispose' | 'update' | 'layout' | 'toJSON' | 'focus';
-export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>, RendererMethodOptionalList> {
-    readonly element: HTMLElement;
-    init: (params: WatermarkRendererInitParameters) => void;
-}
-export interface TabPartInitParameters extends GroupPanelPartInitParameters {
-    tabLocation: TabLocation;
-}
-export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
-    readonly element: HTMLElement;
-    init(parameters: TabPartInitParameters): void;
-}
-export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
-    readonly element: HTMLElement;
-    init(parameters: GroupPanelPartInitParameters): void;
-    onShow?(): void;
-    onHide?(): void;
-}
-export interface IGroupPanelInitParameters extends PanelInitParameters, HeaderPartInitParameters {
-}
-export interface GroupviewPanelState {
-    id: string;
-    contentComponent?: string;
-    tabComponent?: string;
-    title?: string;
-    renderer?: DockviewPanelRenderer;
-    params?: {
-        [key: string]: any;
-    };
-    minimumWidth?: number;
-    minimumHeight?: number;
-    maximumWidth?: number;
-    maximumHeight?: number;
-}
-export {};

package/dist/esm/dockview/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/dockview/validate.js

@@ -1,76 +0,0 @@
-"use strict";
-// import { SerializedGridObject } from '../gridview/gridview';
-// import { Orientation } from '../splitview/splitview';
-// import { SerializedDockview } from './dockviewComponent';
-// import { GroupPanelViewState } from './dockviewGroupPanelModel';
-// function typeValidate3(data: GroupPanelViewState, path: string): void {
-//     if (typeof data.id !== 'string') {
-//         throw new Error(`${path}.id must be a string`);
-//     }
-//     if (
-//         typeof data.activeView !== 'string' ||
-//         typeof data.activeView !== 'undefined'
-//     ) {
-//         throw new Error(`${path}.activeView must be a string of undefined`);
-//     }
-// }
-// function typeValidate2(
-//     data: SerializedGridObject<GroupPanelViewState>,
-//     path: string
-// ): void {
-//     if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
-//         throw new Error(`${path}.size must be a number or undefined`);
-//     }
-//     if (
-//         typeof data.visible !== 'boolean' &&
-//         typeof data.visible !== 'undefined'
-//     ) {
-//         throw new Error(`${path}.visible must be a boolean or undefined`);
-//     }
-//     if (data.type === 'leaf') {
-//         if (
-//             typeof data.data !== 'object' ||
-//             data.data === null ||
-//             Array.isArray(data.data)
-//         ) {
-//             throw new Error('object must be a non-null object');
-//         }
-//         typeValidate3(data.data, `${path}.data`);
-//     } else if (data.type === 'branch') {
-//         if (!Array.isArray(data.data)) {
-//             throw new Error(`${path}.data must be an array`);
-//         }
-//     } else {
-//         throw new Error(`${path}.type must be onew of {'branch', 'leaf'}`);
-//     }
-// }
-// function typeValidate(data: SerializedDockview): void {
-//     if (typeof data !== 'object' || data === null) {
-//         throw new Error('object must be a non-null object');
-//     }
-//     const { grid, panels, activeGroup, floatingGroups } = data;
-//     if (typeof grid !== 'object' || grid === null) {
-//         throw new Error("'.grid' must be a non-null object");
-//     }
-//     if (typeof grid.height !== 'number') {
-//         throw new Error("'.grid.height' must be a number");
-//     }
-//     if (typeof grid.width !== 'number') {
-//         throw new Error("'.grid.width' must be a number");
-//     }
-//     if (typeof grid.root !== 'object' || grid.root === null) {
-//         throw new Error("'.grid.root' must be a non-null object");
-//     }
-//     if (grid.root.type !== 'branch') {
-//         throw new Error(".grid.root.type must be of type 'branch'");
-//     }
-//     if (
-//         grid.orientation !== Orientation.HORIZONTAL &&
-//         grid.orientation !== Orientation.VERTICAL
-//     ) {
-//         throw new Error(
-//             `'.grid.width' must be one of {${Orientation.HORIZONTAL}, ${Orientation.VERTICAL}}`
-//         );
-//     }
-//     typeValidate2(grid.root, '.grid.root');
-// }

package/dist/esm/dockview/watermarkService.d.ts

@@ -1,30 +0,0 @@
-import { IDisposable } from '../lifecycle';
-import { Event } from '../events';
-import { IWatermarkRenderer } from './types';
-import { DockviewApi } from '../api/component.api';
-import { DockviewGroupPanel } from './dockviewGroupPanel';
-export interface IWatermarkHost {
-    readonly api: DockviewApi;
-    readonly mountElement: HTMLElement;
-    createWatermarkComponent(): IWatermarkRenderer;
-    hasVisibleGridGroup(): boolean;
-    readonly onDidAdd: Event<DockviewGroupPanel>;
-    readonly onDidRemove: Event<DockviewGroupPanel>;
-    readonly onDidViewVisibilityChangeMicroTaskQueue: Event<unknown>;
-}
-export interface IWatermarkService extends IDisposable {
-    /** Mount or unmount the watermark based on current grid state. */
-    update(): void;
-    /** Tear down the current watermark and re-evaluate. Used when the watermark factory option changes. */
-    refresh(): void;
-}
-export declare class WatermarkService implements IWatermarkService {
-    private readonly _host;
-    private _watermark;
-    constructor(host: IWatermarkHost);
-    update(): void;
-    refresh(): void;
-    private _unmount;
-    dispose(): void;
-}
-export declare const WatermarkModule: import("./modules").DockviewModule<IWatermarkHost>;

package/dist/esm/dockview/watermarkService.js

@@ -1,56 +0,0 @@
-import { CompositeDisposable } from '../lifecycle';
-import { addTestId } from '../dom';
-import { Event } from '../events';
-import { defineModule } from './modules';
-export class WatermarkService {
-    constructor(host) {
-        this._watermark = null;
-        this._host = host;
-    }
-    update() {
-        if (this._host.hasVisibleGridGroup()) {
-            this._unmount();
-            return;
-        }
-        if (this._watermark) {
-            return;
-        }
-        this._watermark = this._host.createWatermarkComponent();
-        this._watermark.init({ containerApi: this._host.api });
-        const container = document.createElement('div');
-        container.className = 'dv-watermark-container';
-        addTestId(container, 'watermark-component');
-        container.appendChild(this._watermark.element);
-        this._host.mountElement.appendChild(container);
-    }
-    refresh() {
-        this._unmount();
-        this.update();
-    }
-    _unmount() {
-        var _a, _b;
-        if (!this._watermark) {
-            return;
-        }
-        this._watermark.element.parentElement.remove();
-        (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-        this._watermark = null;
-    }
-    dispose() {
-        this._unmount();
-    }
-}
-export const WatermarkModule = defineModule({
-    name: 'Watermark',
-    serviceKey: 'watermarkService',
-    create: (host) => new WatermarkService(host),
-    init: (host, service) => {
-        // Initial evaluation reflects the watermark state at construction time.
-        service.update();
-        return new CompositeDisposable(Event.any(host.onDidAdd, host.onDidRemove)(() => {
-            service.update();
-        }), host.onDidViewVisibilityChangeMicroTaskQueue(() => {
-            service.update();
-        }));
-    },
-});

package/dist/esm/dom.d.ts

@@ -1,60 +0,0 @@
-import { Event as DockviewEvent, Emitter } from './events';
-import { IDisposable, CompositeDisposable } from './lifecycle';
-export interface OverflowEvent {
-    hasScrollX: boolean;
-    hasScrollY: boolean;
-}
-export declare class OverflowObserver extends CompositeDisposable {
-    private readonly _onDidChange;
-    readonly onDidChange: DockviewEvent<OverflowEvent>;
-    private _value;
-    constructor(el: HTMLElement);
-}
-export declare function watchElementResize(element: HTMLElement, cb: (entry: ResizeObserverEntry) => void): IDisposable;
-export declare const removeClasses: (element: HTMLElement, ...classes: string[]) => void;
-export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;
-export declare const toggleClass: (element: HTMLElement, className: string, isToggled: boolean) => void;
-export declare function isAncestor(testChild: Node | null, testAncestor: Node | null): boolean;
-export declare function getElementsByTagName(tag: string, document: ParentNode): HTMLElement[];
-export interface IFocusTracker extends IDisposable {
-    readonly onDidFocus: DockviewEvent<void>;
-    readonly onDidBlur: DockviewEvent<void>;
-    refreshState?(): void;
-}
-export declare function trackFocus(element: HTMLElement): IFocusTracker;
-export declare function quasiPreventDefault(event: Event): void;
-export declare function quasiDefaultPrevented(event: Event): boolean;
-export type CspNonceProvider = string | ((targetDocument: Document) => string | undefined);
-export interface AddStylesOptions {
-    nonce?: CspNonceProvider;
-}
-export declare function addStyles(document: Document, styleSheetList: StyleSheetList, options?: AddStylesOptions): void;
-export declare function getDomNodePagePosition(domNode: Element): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-};
-/**
- * Check whether an element is in the DOM (including the Shadow DOM)
- * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
- */
-export declare function isInDocument(element: Element): boolean;
-export declare function addTestId(element: HTMLElement, id: string): void;
-export declare function disableIframePointEvents(rootNode?: ParentNode): {
-    release: () => void;
-};
-export declare function getDockviewTheme(element: HTMLElement): string | undefined;
-export declare class Classnames {
-    private readonly element;
-    private _classNames;
-    constructor(element: HTMLElement);
-    setClassNames(classNames: string): void;
-}
-export declare function isChildEntirelyVisibleWithinParent(child: HTMLElement, parent: HTMLElement): boolean;
-export declare function onDidWindowMoveEnd(window: Window): Emitter<void>;
-export declare function onDidWindowResizeEnd(element: Window, cb: () => void): CompositeDisposable;
-export declare function shiftAbsoluteElementIntoView(element: HTMLElement, root: HTMLElement, options?: {
-    buffer: number;
-}): void;
-export declare function findRelativeZIndexParent(el: HTMLElement): HTMLElement | null;