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

package/lib/tree-select/index.js

@@ -1,891 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css } 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
-import { repeat } from '@refinitiv-ui/core/lib/directives/repeat.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import '../icon/index.js';
-import '../text-field/index.js';
-import '../pill/index.js';
-import '../button/index.js';
-import '../checkbox/index.js';
-import '../tree/index.js';
-import { ComboBox } from '../combo-box/index.js';
-import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
-import { CheckedState, TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/tree-select.js';
-export { TreeSelectRenderer };
-const MEMO_THROTTLE = 16;
-const POPUP_POSITION = ['bottom-start', 'top-start'];
-/**
- * Dropdown control that allows selection from the tree list
- *
- * @attr {boolean} [opened=false] - Set dropdown to open
- * @prop {boolean} [opened=false] - Set dropdown to open
- * @attr {string} placeholder - Set placeholder text
- * @prop {string} [placeholder=""] - Set placeholder text
- * @prop {TreeSelectData[]} [data=[]] - Data object to be used for creating tree
- * @fires confirm - Fired when selection is confirmed
- * @fires cancel - Fired when selection is cancelled
- * @fires query-changed - Fired when query in input box changed
- * @fires value-changed - Fired when value of control changed
- * @fires opened-changed - Fires when opened state changes
- */
-let TreeSelect = class TreeSelect extends ComboBox {
-    constructor() {
-        super();
-        /**
-         * Tracks the number of filter matches
-         *
-         * Only needed if internal filtering is unused
-         */
-        this.filterCount = 0;
-        /**
-         * Memoized selection and expansion stats
-         * Used for displaying counts and calculating control visibility/content
-         */
-        this.memo = {
-            selected: 0,
-            selectable: 0,
-            expanded: 0,
-            expandable: 0
-        };
-        /**
-         * Extracted values from {@link this.checkedGroupedItems}
-         */
-        this.pillsData = [];
-        /**
-         * Are there pills visible
-         */
-        this.hasPills = false;
-        /**
-         * Store references to items selected and visible at point of selection filter being applied
-         * Allow for items to be removed from the selection, but still be visible
-         */
-        this.editSelectionItems = new Set();
-        /**
-         * Composer used for live changes
-         */
-        this.composer = new CollectionComposer([]);
-        /**
-         * Provide access to tree interface
-         */
-        this.treeManager = new TreeManager(this.composer);
-        /**
-         * Modification updates are called a lot
-         *
-         * This throttles the memo updates to reduce lookups
-         */
-        this.memoUpdateThrottle = new TimeoutTaskRunner(MEMO_THROTTLE);
-        /**
-         * Breaks the relationship when multiple
-         * selection mode is enabled
-         */
-        this.noRelation = false;
-        /**
-         * Should the control show pills
-         */
-        this.showPills = false;
-        this._values = [];
-        /**
-         * Renderer used to render tree item elements
-         * @type {TreeSelectRenderer}
-         */
-        this.renderer = new TreeSelectRenderer(this);
-        /**
-         * TODO:
-         * @ignore
-         */
-        this.multiple = true;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    static get styles() {
-        return css `
-      [part=list] {
-        display: flex;
-        flex-direction: row;
-        box-sizing: content-box;
-        cursor: default;
-      }
-
-      [part=section] {
-        display: flex;
-        flex-direction: column;
-        width: inherit;
-        height: inherit;
-        max-height: inherit;
-        min-height: inherit;
-        max-width: inherit;
-        min-width: inherit;
-        overflow: hidden;
-      }
-
-      [part=selection-area] {
-        min-height: 0;
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: auto;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        outline: none;
-      }
-
-      [part~=control-container] {
-        box-sizing: border-box;
-        display: flex;
-        flex-shrink: 0;
-        flex-basis: auto;
-        flex-grow: 0;
-        align-items: center;
-      }
-
-      [part=pills] {
-        flex: none;
-      }
-    `;
-    }
-    /**
-     * Returns a values collection of the currently
-     * selected item values
-     * @type {string[]}
-     * @default []
-     */
-    get values() {
-        return this._values;
-    }
-    set values(values) {
-        super.values = values;
-        this._values = values;
-    }
-    /**
-     * Set resolved data
-     * @param value resolved data
-     */
-    set resolvedData(value) {
-        const oldValue = this.resolvedData;
-        if (value !== oldValue) {
-            super.resolvedData = value;
-            this.treeManager = new TreeManager(this.composer, this.mode);
-            // keep the original values
-            // do not use values setter to avoid unnecessary calls
-            this._values = this.composerValues;
-            this.listenToComposer();
-            this.updateMemo();
-            this.updatePills();
-            this.requestUpdate('data', oldValue);
-        }
-    }
-    get resolvedData() {
-        return super.resolvedData;
-    }
-    /**
-     * The the values from composer ignoring freeTextValue
-     * @override
-     */
-    get composerValues() {
-        return this.treeManager.checkedItems.map(item => item.value || '').slice();
-    }
-    /**
-     * Provide list of currently selected items
-     */
-    get selection() {
-        return this.treeManager.checkedItems.slice();
-    }
-    /**
-     * Get a list of selected item labels
-     * @returns Has selection
-     * @override
-     */
-    get selectedLabels() {
-        return this.checkedGroupedItems.map(selected => this.getItemPropertyValue(selected, 'label') || '');
-    }
-    /**
-     * Returns memoized selected state
-     * @returns Has selection
-     */
-    get hasActiveSelection() {
-        return this.memo.selected > 0;
-    }
-    /**
-     * Returns memoized selectable state
-     * @returns Has selectable
-     */
-    get hasSelectable() {
-        return this.memo.selectable > 0;
-    }
-    /**
-     * Returns memoized all selected count
-     * @returns Is all selected
-     */
-    get isAllSelected() {
-        return this.hasSelectable && this.memo.selected === this.memo.selectable;
-    }
-    /**
-     * Returns memoized expansion state
-     * @returns Are all expanded
-     */
-    get hasExpansion() {
-        return this.memo.expanded > 0;
-    }
-    /**
-     * Determines if the expansion controls should be displayed
-     *
-     * @returns Control visible state
-     */
-    get expansionControlVisible() {
-        // could be a static prop and updated via CC
-        return this.memo.expandable > 0;
-    }
-    /**
-     * Determine if the selection filter is active
-     * @returns Selection filter on/off
-     */
-    get selectionFilterState() {
-        return this.editSelectionItems.size > 0;
-    }
-    /**
-     * Mode to use in the tree manager
-     */
-    get mode() {
-        return !this.noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
-    }
-    /**
-     * Get a list of selected items.
-     * If all leaves are selected, a parent becomes selected
-     * If mode is INDEPENDENT, grouping is not applied
-     */
-    get checkedGroupedItems() {
-        const treeManager = this.treeManager;
-        const checkedItems = treeManager.checkedItems;
-        if (this.mode === TreeManagerMode.INDEPENDENT) {
-            return checkedItems;
-        }
-        const checkedGroupItems = [];
-        const unchecked = []; // need for performance to not double check same ancestors
-        checkedItems.forEach(item => {
-            const ancestors = treeManager.getItemAncestors(item);
-            for (let i = 0; i < ancestors.length; i += 1) {
-                const ancestor = ancestors[i];
-                // An ancestor is already included. No need to continue
-                if (checkedGroupItems.includes(ancestor)) {
-                    return;
-                }
-                // An ancestor has been already checked. Do not check again
-                if (unchecked.includes(ancestor)) {
-                    continue;
-                }
-                // Ancestor is checked. No need to check any other ancestors
-                if (treeManager.getItemCheckedState(ancestor) === CheckedState.CHECKED) {
-                    checkedGroupItems.push(ancestor);
-                    return;
-                }
-                // Do not check again this ancestor for performance
-                unchecked.push(ancestor);
-            }
-            checkedGroupItems.push(item);
-        });
-        return checkedGroupItems;
-    }
-    /**
-     * Persist the current selection
-     * Takes the current selection and uses it for {@link TreeSelect.values}
-     * Also uses current selection as a revert position for future changes
-     * @returns {void}
-     */
-    persistSelection() {
-        const oldValues = this.values.slice();
-        const newValues = this.composerValues;
-        const oldComparison = oldValues.sort().toString();
-        const newComparison = newValues.sort().toString();
-        if (oldComparison !== newComparison) {
-            this.values = newValues;
-            this.notifyPropertyChange('value', this.value);
-        }
-    }
-    /**
-     * Reverse selection. Run on Esc or Cancel
-     * @returns {void}
-     */
-    cancelSelection() {
-        // values setter updates the collection composer if required
-        this.values = this._values;
-    }
-    /**
-     * Update memoized track
-     *
-     * Update states for expansion and selection
-     *
-     * @returns {void}
-     */
-    updateMemo() {
-        this.memo = {
-            expanded: 0,
-            expandable: 0,
-            selected: 0,
-            selectable: 0
-        };
-        this.queryItems((item, composer) => {
-            const hasChildren = composer.getItemChildren(item);
-            if (hasChildren.length) {
-                this.memo.expandable += 1;
-                if (this.treeManager.isItemExpanded(item) && this.treeManager.isItemCheckable(item)) {
-                    this.memo.expanded += 1;
-                }
-            }
-            else if (this.treeManager.isItemCheckable(item)) {
-                this.memo.selectable += 1;
-                if (this.getItemPropertyValue(item, 'selected') === true) {
-                    this.memo.selected += 1;
-                }
-            }
-            return false;
-        });
-        this.requestUpdate();
-    }
-    /**
-     * Utility method - closes and resets changes such as query
-     * @returns {void}
-     */
-    closeAndReset() {
-        this.resetInput();
-        this.setOpened(false);
-    }
-    /**
-     * Save the current selection
-     * @returns {void}
-     */
-    save() {
-        const event = new CustomEvent('confirm');
-        this.dispatchEvent(event);
-        if (!event.defaultPrevented) {
-            this.persistSelection();
-            this.closeAndReset();
-        }
-    }
-    /**
-     * Discard the current selection
-     * @returns {void}
-     */
-    cancel() {
-        const event = new CustomEvent('cancel');
-        this.dispatchEvent(event);
-        if (!event.defaultPrevented) {
-            this.closeAndReset();
-            // reset always happens on popup close action
-        }
-    }
-    /**
-     * Toggle tree level expansion action
-     * @returns {void}
-     */
-    expansionToggleClickHandler() {
-        if (this.hasExpansion) {
-            this.treeManager.collapseAllItems();
-        }
-        else {
-            this.treeManager.expandAllItems();
-        }
-    }
-    /**
-     * Toggle Selection of all tree items
-     * @param event checked-change event
-     * @returns {void}
-     */
-    selectionToggleHandler(event) {
-        if (event.detail.value) {
-            this.treeManager.checkAllItems();
-        }
-        else {
-            this.treeManager.uncheckAllItems();
-        }
-    }
-    /**
-     * Remove selection filter
-     * @returns {void}
-     */
-    fullClickHandler() {
-        this.exitEditSelection();
-    }
-    /**
-     * Apply selection filter
-     * @returns {void}
-     */
-    selectedClickHandler() {
-        if (this.hasActiveSelection) {
-            this.enterEditSelection();
-        }
-    }
-    /**
-     * Apply the selection filter by entering edit selection mode
-     * @returns {void}
-     */
-    enterEditSelection() {
-        this.editSelectionItems = new Set(this.treeManager.checkedItems);
-        this.filterItems();
-    }
-    /**
-     * Remove selection filtering by exiting edit selection mode
-     * @returns {void}
-     */
-    exitEditSelection() {
-        this.clearSelectionFilter();
-        this.filterItems();
-    }
-    /**
-     * Executed when the popup is fully opened
-     * @returns {void}
-     */
-    onPopupOpened() {
-        super.onPopupOpened();
-        this.clearSelectionFilter();
-        this.updatePills();
-        this.updateMemo();
-    }
-    /**
-     * Clear selection filter
-     * @returns {void}
-     */
-    clearSelectionFilter() {
-        this.editSelectionItems.clear();
-    }
-    /**
-     * Executed when the popup is fully closed
-     * @returns {void}
-     */
-    onPopupClosed() {
-        super.onPopupClosed();
-        this.updateMemo();
-        this.cancelSelection();
-        this.exitEditSelection();
-    }
-    /**
-     * Filter the internal items by query. Changes items' hidden state.
-     * @returns {void}
-     */
-    filterItems() {
-        // if filter is null, it is off and external app is responsible
-        if (this.filter) {
-            const filter = this.filter;
-            const items = this.queryItems((item) => {
-                // do not filter hidden items
-                if (item.hidden) {
-                    return false;
-                }
-                // does item match the selection filter
-                let result = true;
-                if (this.editSelectionItems.size && !this.editSelectionItems.has(item)) {
-                    result = false;
-                }
-                // item matches selection, can have conventional filter applied
-                if (result) {
-                    result = filter(item);
-                }
-                if (result) {
-                    this.treeManager.includeItem(item);
-                }
-                else {
-                    this.treeManager.excludeItem(item);
-                }
-                return result;
-            }).slice();
-            // do not expand EMS if there is no filter applied
-            if (this.query || this.editSelectionItems.size) {
-                this.addItemDescendantsToRender(items);
-                this.addExpandedAncestorsToRender(items);
-            }
-            this.filterCount = items.length;
-            // unlike CCB, we do not close EMS when there is no matches for filter
-        }
-        this.forcePopupLayout();
-    }
-    /**
-     * Utility method
-     * Adds descendants for each item passed
-     * @param items List of child items
-     * @returns {void}
-     */
-    addItemDescendantsToRender(items) {
-        items.forEach((item) => {
-            /**
-             * Collapse an item to prevent tree show too many nested expanded
-             */
-            if (this.treeManager.isItemExpanded(item)) {
-                this.treeManager.collapseItem(item);
-            }
-            /**
-             * show all descendants of items to make them all are selectable
-             * and user can navigate into nested data
-             */
-            const children = this.treeManager.getItemChildren(item);
-            if (children.length) {
-                this.addNestedItemsToRender(children, items);
-            }
-        });
-    }
-    /**
-     * Utility method
-     * Add nested children of item list
-     * @param items List of items
-     * @param excludeItems List of exclude items
-     * @returns {void}
-     */
-    addNestedItemsToRender(items, excludeItems) {
-        items.forEach(item => {
-            // Skip hidden and exclude item
-            if (!item.hidden && !excludeItems.includes(item)) {
-                // Add item and nested children
-                this.treeManager.includeItem(item);
-                const children = this.treeManager.getItemChildren(item);
-                if (children.length) {
-                    this.addNestedItemsToRender(children, excludeItems);
-                }
-            }
-        });
-    }
-    /**
-     * Utility method
-     * Adds ancestors for each item passed and expand
-     * @param items List of child items
-     * @returns {void}
-     */
-    addExpandedAncestorsToRender(items) {
-        // establish unique ancestors set
-        const ancestors = new Set();
-        // we iterate each item match so as to find ancestors
-        items.forEach((item) => {
-            // get the ancestors
-            const parent = this.treeManager.getItemParent(item);
-            if (parent && !ancestors.has(parent)) {
-                this.treeManager.getItemAncestors(item).forEach((ancestor) => {
-                    ancestors.add(ancestor); // track ancestors
-                    this.addExpandedAncestorToRender(ancestor);
-                });
-            }
-        });
-    }
-    /**
-     * Utility method
-     * Adds parent and expands
-     * @param ancestor parent item
-     * @returns {void}
-     */
-    addExpandedAncestorToRender(ancestor) {
-        this.treeManager.includeItem(ancestor);
-        this.treeManager.expandItem(ancestor);
-    }
-    /**
-     * Reacts to pill removal by de-selecting the related item
-     * @param event Event containing the pill item
-     *
-     * @returns {void}
-     */
-    onPillRemoved(event) {
-        const pill = event.target;
-        const item = this.queryItemsByPropertyValue('value', pill.value)[0];
-        if (item) {
-            this.treeManager.uncheckItem(item);
-            // Focus must be shifted as otherwise focus is shifted to body once the item is removed and popup gets closed
-            this.shiftFocus();
-        }
-    }
-    /**
-     * Handles key input
-     * @param event Key down event object
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    onKeyDown(event) {
-        var _a, _b;
-        // There are three areas, which have different reaction on key press:
-        // 1) search field
-        // 2) tree selection
-        // 3) popup panel
-        if (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.selectionAreaEl && this.listEl) {
-            // Focus within selection area. Propagate all events
-            this.reTargetEvent(event, this.listEl);
-        }
-        else if (!((_b = this.popupEl) === null || _b === void 0 ? void 0 : _b.focused)) {
-            // search field is in focus
-            // combo box logic should take care
-            super.onKeyDown(event);
-        }
-        else {
-            // up/down to selection area
-            switch (event.key) {
-                case 'Up':
-                case 'ArrowUp':
-                case 'Down':
-                case 'ArrowDown':
-                    super.onKeyDown(event);
-                    break;
-                // no default
-            }
-        }
-    }
-    /**
-     * Navigates up the list.
-     * Opens the list if closed.
-     * @param event keyboard event
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    up(event) {
-        super.up(event);
-        this.focusOnSelectionArea();
-    }
-    /**
-     * Navigates down the list.
-     * Opens the list if closed.
-     * @param event keyboard event
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    down(event) {
-        super.down(event);
-        this.focusOnSelectionArea();
-    }
-    /**
-     * Make sure that after up/down keys the focus gracefully moves to selection area
-     * so the user can then use left/right/Enter keys for keyboard navigation
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    focusOnSelectionArea() {
-        // The logic needs to happen after the update cycle
-        // as otherwise focus logic may contradict with other components
-        // and the focus is not moved
-        void this.updateComplete.then(() => {
-            var _a;
-            (_a = this.selectionAreaEl) === null || _a === void 0 ? void 0 : _a.focus();
-        });
-    }
-    /**
-     * Adds a throttled update for pills and memo
-     * @returns {void}
-     */
-    modificationUpdate() {
-        super.modificationUpdate();
-        this.memoUpdateThrottle.schedule(() => {
-            this.updatePills();
-            this.updateMemo();
-        });
-    }
-    /**
-     * Update pills if {@link TreeSelect.showPills} showPills is applied
-     *
-     * @returns {void}
-     */
-    updatePills() {
-        if (this.showPills) {
-            this.pillsData = this.checkedGroupedItems.slice();
-            this.hasPills = !!this.pillsData.length;
-        }
-    }
-    /**
-     * Queries the composer for data items. Uses Infinity depth
-     * @param engine Composer query engine
-     * @returns Collection of matched items
-     * @override
-     */
-    queryItems(engine) {
-        return this.composer.queryItems(engine, Infinity);
-    }
-    /**
-     * Queries the composer for data items,
-     * matching by property value. Uses Infinity depth
-     * @param property Property name to query
-     * @param value Property value to match against
-     * @returns Collection of matched items
-     * @override
-     */
-    queryItemsByPropertyValue(property, value) {
-        return this.composer.queryItemsByPropertyValue(property, value, Infinity);
-    }
-    /**
-     * Filter template
-     * @returns Render template
-     */
-    get filtersTemplate() {
-        return html `
-        <div part="control-container filter-control">
-          <div part="match-count-wrapper">
-            ${this.matchCountTemplate}
-          </div>
-          ${this.hasSelectable ? html `<div part="filter-wrapper">
-            <div
-              role="button"
-              tabindex="0"
-              active
-              part="control full-filter${!this.selectionFilterState ? ' active' : ''}"
-              @tap="${this.fullClickHandler}">${this.t('FULL_LIST')}</div>
-            <div
-              role="button"
-              tabindex="${ifDefined(this.hasActiveSelection ? 0 : undefined)}"
-              part="control selected-filter${this.selectionFilterState ? ' active' : ''}${!this.hasActiveSelection ? ' disabled' : ''}"
-              @tap="${this.selectedClickHandler}">${this.t('SELECTED')}</div>
-          </div>` : html ``}
-        </div>
-    `;
-    }
-    /**
-     * Tree control template
-     * @returns Render template
-     */
-    get treeControlsTemplate() {
-        if (!this.hasSelectable) {
-            return html ``;
-        }
-        let expansionControl = html ``;
-        if (this.expansionControlVisible) {
-            expansionControl = html `
-        <div part="filter-wrapper">
-          <div
-            role="button"
-            tabindex="0"
-            part="control expand-toggle"
-            @tap="${this.expansionToggleClickHandler}">${this.t('EXPAND_COLLAPSE', { expansion: this.hasExpansion })}</div>
-          </div>
-      `;
-        }
-        return html `
-        <div part="control-container tree-control">
-            <ef-checkbox
-              part="selection-toggle"
-              .checked="${this.isAllSelected}"
-              .indeterminate="${this.hasActiveSelection && !this.isAllSelected}"
-              @checked-changed="${this.selectionToggleHandler}">${this.t('SELECT_CONTROL', { selected: this.isAllSelected })}</ef-checkbox>
-          ${expansionControl}
-        </div>
-    `;
-    }
-    /**
-     * Conditional filter matches template
-     * @returns Render template
-     */
-    get matchCountTemplate() {
-        return this.query ? html `
-            <span part="match-count">${this.t('MATCHES_NUM', { numMatched: this.filterCount })}</span>
-    ` : html ``;
-    }
-    /**
-     * Commit controls template
-     * @returns Render template
-     */
-    get commitControlsTemplate() {
-        return html `
-      <ef-button
-        id="done"
-        part="done-button"
-        cta
-        @tap="${this.save}">${this.t('DONE')}</ef-button>
-      <ef-button
-        id="cancel"
-        part="cancel-button"
-        @tap="${this.cancel}">${this.t('CANCEL')}</ef-button>
-    `;
-    }
-    /**
-     * Pills template
-     * @returns Render template
-     */
-    get pillsTemplate() {
-        // always injected when we have show pills vs injecting and re-injecting partial
-        // visibility will typically be controlled by styling: display: none / block or similar
-        if (this.showPills && this.hasPills && this.hasSelectable) {
-            return html `<div part="pills">
-        ${repeat(this.pillsData, pill => pill.value, pill => html `
-        <ef-pill
-          tabindex="-1"
-          clears
-          .readonly="${pill.readonly || this.readonly}"
-          .disabled="${pill.disabled || this.disabled}"
-          .value="${pill.value}"
-          @clear="${this.onPillRemoved}">${pill.label}</ef-pill>`)}
-      </div>`;
-        }
-    }
-    /**
-     * Returns template for popup
-     * Lazy loads the popup
-     * @returns Popup template or undefined
-     */
-    get popupTemplate() {
-        if (this.lazyRendered) {
-            return html `
-      <ef-overlay
-        part="list"
-        style=${styleMap(this.popupDynamicStyles)}
-        @opened="${this.onPopupOpened}"
-        @closed="${this.onPopupClosed}"
-        .focusBoundary="${this}"
-        .opened="${this.opened}"
-        .positionTarget="${this}"
-        .position="${POPUP_POSITION}"
-        .delegatesFocus=${true}
-        no-cancel-on-outside-click
-        tabindex="0"
-        with-shadow
-        no-overlap
-        no-autofocus>
-        <div part="section">
-          ${this.filtersTemplate}
-          ${this.treeControlsTemplate}
-          <div part="selection-area" tabindex="-1">
-            <ef-tree
-              id="internal-list"
-              @focusin="${this.shiftFocus}"
-              tabindex="-1"
-              part="tree"
-              .noRelation=${this.noRelation}
-              .renderer=${this.renderer}
-              .data="${this.composer}"
-              .multiple="${this.multiple}"></ef-tree>
-            ${this.pillsTemplate}
-          </div>
-          <div part="control-container footer" id="footer">${this.commitControlsTemplate}</div>
-        </div>
-      </ef-overlay>
-      `;
-        }
-    }
-};
-__decorate([
-    translate()
-], TreeSelect.prototype, "t", void 0);
-__decorate([
-    property({ attribute: 'no-relation', type: Boolean })
-], TreeSelect.prototype, "noRelation", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-pills' })
-], TreeSelect.prototype, "showPills", void 0);
-__decorate([
-    property({ type: Array, attribute: false })
-], TreeSelect.prototype, "values", null);
-__decorate([
-    property({ type: Function, attribute: false })
-], TreeSelect.prototype, "renderer", void 0);
-__decorate([
-    query('[part=selection-area]')
-], TreeSelect.prototype, "selectionAreaEl", void 0);
-__decorate([
-    query('[part=list]')
-], TreeSelect.prototype, "popupEl", void 0);
-TreeSelect = __decorate([
-    customElement('ef-tree-select', {
-        alias: 'emerald-multi-select'
-    })
-], TreeSelect);
-export { TreeSelect };