igniteui-webcomponents/components/tree/tree.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcTreeComponent_1;
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { addSafeEventListener } from '../common/util.js';
import { styles } from './themes/container.base.css.js';
import { all } from './themes/container.js';
import { IgcTreeNavigationService } from './tree.navigation.js';
import { IgcTreeSelectionService } from './tree.selection.js';
import IgcTreeItemComponent from './tree-item.js';
let IgcTreeComponent = IgcTreeComponent_1 = class IgcTreeComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcTreeComponent_1, IgcTreeItemComponent);
    }
    onDirChange() {
        this.items?.forEach((item) => {
            item.requestUpdate();
        });
    }
    selectionModeChange() {
        this.selectionService.clearItemsSelection();
        this.items?.forEach((item) => {
            item.requestUpdate();
        });
    }
    singleBranchExpandChange() {
        if (this.singleBranchExpand) {
            if (this.navService.activeItem) {
                const path = this.navService.activeItem.path;
                const remainExpanded = new Set(path.splice(0, path.length - 1));
                this.items.forEach((item) => {
                    if (!remainExpanded.has(item)) {
                        item.collapseWithEvent();
                    }
                });
            }
            else {
                this.items.forEach((item) => item.collapseWithEvent());
            }
        }
    }
    constructor() {
        super();
        this.singleBranchExpand = false;
        this.toggleNodeOnClick = false;
        this.selection = 'none';
        addThemingController(this, all);
        this.selectionService = new IgcTreeSelectionService(this);
        this.navService = new IgcTreeNavigationService(this, this.selectionService);
        addSafeEventListener(this, 'keydown', this.handleKeydown);
    }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('role', 'tree');
        this.items.forEach((i) => {
            i.init = true;
        });
        const firstNotDisabledItem = this.items.find((i) => !i.disabled);
        if (firstNotDisabledItem) {
            firstNotDisabledItem.tabIndex = 0;
            this.navService.focusItem(firstNotDisabledItem);
        }
    }
    get items() {
        return Array.from(this.querySelectorAll('igc-tree-item'));
    }
    handleKeydown(event) {
        this.navService.handleKeydown(event);
    }
    expandToItem(item) {
        if (item?.parent) {
            item.path.forEach((i) => {
                if (i !== item && !i.expanded) {
                    i.expanded = true;
                }
            });
        }
    }
    select(items) {
        if (!items) {
            this.selectionService.selectItemsWithNoEvent(this.selection === 'cascade'
                ? this.items.filter((item) => item.level === 0)
                : this.items);
        }
        else {
            this.selectionService.selectItemsWithNoEvent(items);
        }
    }
    deselect(items) {
        this.selectionService.deselectItemsWithNoEvent(items);
    }
    expand(items) {
        const _items = items || this.items;
        _items.forEach((item) => {
            item.expanded = true;
        });
    }
    collapse(items) {
        const _items = items || this.items;
        _items.forEach((item) => {
            item.expanded = false;
        });
    }
    render() {
        return html `<slot></slot>`;
    }
};
IgcTreeComponent.tagName = 'igc-tree';
IgcTreeComponent.styles = styles;
__decorate([
    property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })
], IgcTreeComponent.prototype, "singleBranchExpand", void 0);
__decorate([
    property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })
], IgcTreeComponent.prototype, "toggleNodeOnClick", void 0);
__decorate([
    property({ reflect: true })
], IgcTreeComponent.prototype, "selection", void 0);
__decorate([
    watch('dir')
], IgcTreeComponent.prototype, "onDirChange", null);
__decorate([
    watch('selection', { waitUntilFirstUpdate: true })
], IgcTreeComponent.prototype, "selectionModeChange", null);
__decorate([
    watch('singleBranchExpand')
], IgcTreeComponent.prototype, "singleBranchExpandChange", null);
IgcTreeComponent = IgcTreeComponent_1 = __decorate([
    blazorAdditionalDependencies('IgcTreeItemComponent')
], IgcTreeComponent);
export default IgcTreeComponent;
//# sourceMappingURL=tree.js.map