@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/lib/tornado-chart/index.js

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tornado-chart/themes/halo/dark/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/dark';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#6678FF;--secondary-color:#FFFFFF;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #6678FF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(204,204,204,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #404040}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #404040;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/halo/light/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/light';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#334BFF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#334BFF;--secondary-color:#000000;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #334BFF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(13,13,13,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d9d9d9}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d9d9d9;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/charcoal/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#FF9933;--secondary-color:#b35900;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #FF9933);--secondary-color:var(\'--secondary-color\', #b35900);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(194,194,194,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #0a0a0a}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #0a0a0a;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/pearl/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/pearl';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#EE7600;--secondary-color:#EE7600;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(72,72,72,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d5d8db}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d5d8db;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tree/elements/tree-item.d.ts

@@ -0,0 +1,129 @@
+import { JSXInterface } from '../../jsx';
+import { TemplateResult, ControlElement, PropertyValues } from '@refinitiv-ui/core';
+import '../../icon/index.js';
+import '../../checkbox/index.js';
+import type { TreeDataItem } from '../helpers/types';
+import { CheckedState } from '../managers/tree-manager.js';
+/**
+ * Displays a tree list item.
+ * Groups display expansion arrows.
+ */
+export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * Checked state of the item
+     */
+    checkedState: CheckedState;
+    /**
+     * Is the item a parent and should it show an expansion toggle?
+     */
+    parent: boolean;
+    /**
+     * Display in multiple selection mode
+     */
+    multiple: boolean;
+    /**
+     * Expanded state of the item
+     */
+    expanded: boolean;
+    /**
+     * Depth of the item
+     */
+    depth: number;
+    /**
+     * Label of the item
+     */
+    label: string;
+    /**
+     * Icon of the item
+     */
+    icon: string;
+    /**
+     * Original data item, used for interacting with the tree manager
+     */
+    item: T;
+    /**
+     * Highlighted state of the item.
+     * This is for showing which item is currently being interacted with.
+     */
+    highlighted: boolean;
+    /**
+     * Template for rendering the indentation element
+     */
+    protected get indentTemplate(): TemplateResult;
+    /**
+     * Template for rendering the toggle
+     *
+     * ! expand-toggle is required for automatically toggling expanded state
+     */
+    protected get toggleTemplate(): TemplateResult;
+    /**
+     * Template for rendering the checkbox
+     */
+    protected get checkboxTemplate(): TemplateResult;
+    /**
+     * Template for rendering the icon
+     */
+    protected get iconTemplate(): TemplateResult;
+    /**
+     * Is the item fully checked?
+     */
+    protected get checked(): boolean;
+    /**
+     * Is the checked state indeterminate?
+     */
+    protected get indeterminate(): boolean;
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    private multipleChanged;
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    private checkedChanged;
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    private expandedChanged;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tree-item': TreeItem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tree-item': Partial<TreeItem> | JSXInterface.HTMLAttributes<TreeItem>;
+    }
+  }
+}
+
+export {};

package/lib/tree/elements/tree-item.js

@@ -0,0 +1,238 @@
+import { __decorate } from "tslib";
+import { html, ControlElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import '../../icon/index.js';
+import { preload } from '../../icon/index.js';
+import '../../checkbox/index.js';
+import { CheckedState } from '../managers/tree-manager.js';
+preload('right');
+const emptyTemplate = html ``;
+/**
+ * Displays a tree list item.
+ * Groups display expansion arrows.
+ */
+let TreeItem = class TreeItem extends ControlElement {
+    constructor() {
+        super(...arguments);
+        this.defaultRole = 'treeitem';
+        /**
+         * Checked state of the item
+         */
+        this.checkedState = CheckedState.UNCHECKED;
+        /**
+         * Is the item a parent and should it show an expansion toggle?
+         */
+        this.parent = false;
+        /**
+         * Display in multiple selection mode
+         */
+        this.multiple = false;
+        /**
+         * Expanded state of the item
+         */
+        this.expanded = false;
+        /**
+         * Depth of the item
+         */
+        this.depth = 0;
+        /**
+         * Label of the item
+         */
+        this.label = '';
+        /**
+         * Icon of the item
+         */
+        this.icon = '';
+        /**
+         * Highlighted state of the item.
+         * This is for showing which item is currently being interacted with.
+         */
+        this.highlighted = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Template for rendering the indentation element
+     */
+    get indentTemplate() {
+        return this.depth ? html `<div part="indent" style="width:${this.depth}em"></div>` : emptyTemplate;
+    }
+    /**
+     * Template for rendering the toggle
+     *
+     * ! expand-toggle is required for automatically toggling expanded state
+     */
+    get toggleTemplate() {
+        return html `
+    <div expand-toggle part="toggle" style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
+      <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
+    </div>
+    `;
+    }
+    /**
+     * Template for rendering the checkbox
+     */
+    get checkboxTemplate() {
+        if (!this.multiple) {
+            return emptyTemplate;
+        }
+        return html `
+    <ef-checkbox
+      part="checkbox"
+      tabindex="-1"
+      .disabled="${this.disabled}"
+      .readonly="${this.readonly}"
+      .indeterminate="${this.indeterminate}"
+      .checked="${this.checked}"
+      style="pointer-events:none">
+    </ef-checkbox>
+    `;
+    }
+    /**
+     * Template for rendering the icon
+     */
+    get iconTemplate() {
+        if (typeof this.icon === 'undefined') {
+            return emptyTemplate;
+        }
+        return html `<ef-icon part="label-icon" icon="${this.icon}"></ef-icon>`;
+    }
+    /**
+     * Is the item fully checked?
+     */
+    get checked() {
+        return this.checkedState === CheckedState.CHECKED;
+    }
+    /**
+     * Is the checked state indeterminate?
+     */
+    get indeterminate() {
+        return this.checkedState === CheckedState.INDETERMINATE;
+    }
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    multipleChanged() {
+        this.removeAttribute(this.multiple ? 'aria-selected' : 'aria-checked');
+        this.checkedChanged();
+    }
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    checkedChanged() {
+        switch (this.checkedState) {
+            case CheckedState.CHECKED:
+                this.setAttribute('selected', '');
+                this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                break;
+            case CheckedState.INDETERMINATE:
+                this.setAttribute('selected', 'indeterminate');
+                this.setAttribute('aria-checked', 'mixed');
+                break;
+            default:
+                this.removeAttribute('selected');
+                // In single mode, only children nodes are selectable
+                if (this.parent && !this.multiple) {
+                    this.removeAttribute('aria-selected');
+                }
+                else {
+                    this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'false');
+                }
+                break;
+        }
+    }
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    expandedChanged() {
+        if (this.parent) {
+            this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');
+        }
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute('aria-level', String(this.depth + 1));
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checkedState')) {
+            this.checkedChanged();
+        }
+        if (changedProperties.has('multiple') && changedProperties.get('multiple') !== undefined) {
+            this.multipleChanged();
+        }
+        if (changedProperties.has('expanded')) {
+            this.expandedChanged();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    render() {
+        return html `
+      ${this.indentTemplate}
+      ${this.toggleTemplate}
+      ${this.checkboxTemplate}
+      ${this.iconTemplate}
+      <div part="label">
+        <slot>${this.label}</slot>
+      </div>
+  `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], TreeItem.prototype, "checkedState", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'group' })
+], TreeItem.prototype, "parent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItem.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TreeItem.prototype, "depth", void 0);
+__decorate([
+    property({ type: String })
+], TreeItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TreeItem.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: false })
+], TreeItem.prototype, "item", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TreeItem.prototype, "highlighted", void 0);
+TreeItem = __decorate([
+    customElement('ef-tree-item', {
+        alias: 'coral-tree-item'
+    })
+], TreeItem);
+export { TreeItem };

package/lib/tree/elements/tree.d.ts

@@ -0,0 +1,203 @@
+import { JSXInterface } from '../../jsx';
+import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { List } from '../../list/index.js';
+import { TreeRenderer } from '../helpers/renderer.js';
+import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
+import { TreeManagerMode } from '../managers/tree-manager.js';
+/**
+ * Displays a tree structure
+ * to be used for menus and group selections
+ *
+ * @fires value-changed - Fired when the users changed selection item.
+ * @fires expanded-changed - Fired when an item's expanded state has changed.
+ *
+ * @attr {boolean} [stateless=false] - Disable selections
+ * @prop {boolean} [stateless=false] - Disable selections
+ *
+ */
+export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T> {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * Tree manager used for manipulation
+     */
+    private manager;
+    /**
+     * Allows multiple items to be selected
+     */
+    multiple: boolean;
+    /**
+     * Breaks the relationship when multiple
+     * selection mode is enabled
+     */
+    noRelation: boolean;
+    /**
+     * Query string applied to tree
+     */
+    query: string;
+    /**
+     * Custom filter for static data
+     * @type {TreeFilter<T> | null}
+     * @ignore set to protected for now and need to discuss before set to public API
+     */
+    protected filter: TreeFilter<T> | null;
+    /**
+     * Renderer used for generating tree items
+     * @type {TreeRenderer}
+     */
+    renderer: TreeRenderer;
+    /**
+     * Expands all groups
+     * @returns {void}
+     */
+    expandAll(): void;
+    /**
+     * Collapses all groups
+     * @returns {void}
+     */
+    collapseAll(): void;
+    /**
+     * Checks all editable items
+     * @returns {void}
+     */
+    checkAll(): void;
+    /**
+     * Unchecks all editable items
+     * @returns {void}
+     */
+    uncheckAll(): void;
+    /**
+     * @override
+     * @ignore
+     */
+    selectItem(item: T): boolean;
+    /**
+     * Dispatches an event, detailing which item has recently changed it's expanded state.
+     * @param item Data item of which the expanded property changed
+     * @returns {void}
+     */
+    protected dispatchExpandedChangedEvent(item: T): void;
+    /**
+     * Handles tap event when composed path contains
+     * an element with an `expand-toggle` attribute.
+     * @param event Tap event to try and handle
+     * @returns True or False depending if the event was handled
+     */
+    protected handleExpandCollapse(event: TapEvent): boolean;
+    /**
+     * @override
+     */
+    protected onTap(event: TapEvent): void;
+    /**
+     * @override
+     */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Performs left arrow keyboard action,
+     * collapsing a group item if possible.
+     * @returns {void}
+     */
+    protected left(): void;
+    /**
+     * Performs right arrow keyboard action,
+     * expanding a group item if possible.
+     * @returns {void}
+     */
+    protected right(): void;
+    /**
+     * Toggles the expanded state of an item.
+     * Executed when a user taps on an item to expand/collapse the group.
+     * @param item Original data item
+     * @returns {void}
+     */
+    protected toggleExpandedState(item: T): void;
+    /**
+     * @override
+     */
+    protected queryItems(engine: (item: T, composer: CollectionComposer<T>) => boolean): readonly T[];
+    /**
+     * @override
+     */
+    protected queryItemsByPropertyValue<K extends keyof T>(property: K, value: T[K]): readonly T[];
+    /**
+     * @override
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Filter the internal items by query changes items' hidden state
+     * @returns {void}
+     */
+    protected filterItems(): void;
+    /**
+     * Utility method
+     * Adds descendants for each item passed
+     * @param items List of child items
+     * @returns {void}
+     */
+    protected addItemDescendantsToRender(items: T[]): void;
+    /**
+     * Utility method
+     * Add nested children of item list
+     * @param items List of items
+     * @param excludeItems List of exclude items
+     * @param [includeHidden=false] Include hidden items
+     * @returns {void}
+     */
+    protected addNestedItemsToRender(items: readonly T[], excludeItems: readonly T[], includeHidden?: boolean): void;
+    /**
+     * Utility method
+     * Adds ancestors for each item passed and expand
+     * @param items List of child items
+     * @returns {void}
+     */
+    protected addExpandedAncestorsToRender(items: T[]): void;
+    /**
+     * Utility method
+     * Adds parent and expands
+     * @param ancestor parent item
+     * @returns {void}
+     */
+    protected addExpandedAncestorToRender(ancestor: T): void;
+    /**
+     * Selected items in tree
+     * @override
+     * @type {string[]}
+     * @default []
+     */
+    get values(): string[];
+    set values(value: string[]);
+    /**
+     * Data object to be used for creating tree
+     * @override
+     * @type {TreeData<T>}
+     */
+    get data(): TreeData<T>;
+    set data(data: TreeData<T>);
+    /**
+     * @override
+     */
+    protected get renderItems(): readonly T[];
+    /**
+     * Mode to use in the tree manager
+     */
+    protected get mode(): TreeManagerMode;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tree': Tree;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tree': Partial<Tree> | JSXInterface.HTMLAttributes<Tree>;
+    }
+  }
+}
+
+export {};