@skyux/angular-tree-component 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-angular-tree-component.mjs

@@ -0,0 +1,616 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Injectable, EventEmitter, Input, Output, ContentChild, ElementRef, Optional, ViewChild } from '@angular/core';
+import * as i6 from '@blackbaud/angular-tree-component';
+import { TREE_ACTIONS, KEYS, TreeComponent, TreeModule } from '@blackbaud/angular-tree-component';
+import * as i1 from '@skyux/core';
+import { SkyCoreAdapterService } from '@skyux/core';
+import * as i4$1 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
+import * as i2 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i3 from '@skyux/layout';
+import { SkyToolbarModule } from '@skyux/layout';
+import * as i4 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-angular-tree-component' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_angular_tree_clear_all: { message: 'Clear all' },
+        skyux_angular_tree_click_to_expand: { message: 'Click to expand' },
+        skyux_angular_tree_collapse_all: { message: 'Collapse' },
+        skyux_angular_tree_expand_all: { message: 'Expand' },
+        skyux_angular_tree_select_all: { message: 'Select all' },
+    },
+};
+class SkyAngularTreeComponentResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyAngularTreeComponentResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyAngularTreeComponentResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyAngularTreeComponentResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyAngularTreeContextMenuComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu", ngImport: i0, template: "<div class=\"sky-angular-tree-context-menu\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-angular-tree-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-angular-tree-context-menu\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyAngularTreeAdapterService {
+    #coreAdapterService;
+    constructor(coreAdapterService) {
+        this.#coreAdapterService = coreAdapterService;
+    }
+    getFocusableChildren(element) {
+        return this.#coreAdapterService.getFocusableChildren(element);
+    }
+    setTabIndexOfFocusableEls(element, tabIndex) {
+        const focusableEls = this.#coreAdapterService.getFocusableChildren(element);
+        let index = focusableEls.length;
+        while (index--) {
+            focusableEls[index].tabIndex = tabIndex;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
+
+/**
+ * @internal
+ */
+class SkyTreeViewToolbarComponent {
+    constructor() {
+        this.clearAllClick = new EventEmitter();
+        this.collapseAllClick = new EventEmitter();
+        this.expandAllClick = new EventEmitter();
+        this.selectAllClick = new EventEmitter();
+    }
+    onClearAllClick() {
+        this.clearAllClick.emit();
+    }
+    onCollapseAllClick() {
+        this.collapseAllClick.emit();
+    }
+    onExpandAllClick() {
+        this.expandAllClick.emit();
+    }
+    onSelectAllClick() {
+        this.selectAllClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: { showSelectButtons: "showSelectButtons" }, outputs: { clearAllClick: "clearAllClick", collapseAllClick: "collapseAllClick", expandAllClick: "expandAllClick", selectAllClick: "selectAllClick" }, ngImport: i0, template: "<div class=\"sky-angular-tree-toolbar\" role=\"toolbar\">\n  <sky-toolbar>\n    <sky-toolbar-item *ngIf=\"showSelectButtons\">\n      <button\n        class=\"sky-btn sky-btn-link sky-angular-tree-select-all-btn\"\n        type=\"button\"\n        (click)=\"onSelectAllClick()\"\n      >\n        {{ 'skyux_angular_tree_select_all' | skyLibResources }}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item *ngIf=\"showSelectButtons\">\n      <button\n        class=\"sky-btn sky-btn-link sky-angular-tree-clear-all-btn\"\n        type=\"button\"\n        (click)=\"onClearAllClick()\"\n      >\n        {{ 'skyux_angular_tree_clear_all' | skyLibResources }}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-expand-all-btn\"\n        title=\"{{ 'skyux_angular_tree_expand_all' | skyLibResources }}\"\n        type=\"button\"\n        (click)=\"onExpandAllClick()\"\n      >\n        <sky-icon icon=\"angle-double-down\"> </sky-icon>\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n        title=\"{{ 'skyux_angular_tree_collapse_all' | skyLibResources }}\"\n        type=\"button\"\n        (click)=\"onCollapseAllClick()\"\n      >\n        <sky-icon icon=\"angle-double-up\"> </sky-icon>\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3.λ37, selector: "sky-toolbar" }, { kind: "component", type: i3.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i3.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-angular-tree-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-angular-tree-toolbar\" role=\"toolbar\">\n  <sky-toolbar>\n    <sky-toolbar-item *ngIf=\"showSelectButtons\">\n      <button\n        class=\"sky-btn sky-btn-link sky-angular-tree-select-all-btn\"\n        type=\"button\"\n        (click)=\"onSelectAllClick()\"\n      >\n        {{ 'skyux_angular_tree_select_all' | skyLibResources }}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item *ngIf=\"showSelectButtons\">\n      <button\n        class=\"sky-btn sky-btn-link sky-angular-tree-clear-all-btn\"\n        type=\"button\"\n        (click)=\"onClearAllClick()\"\n      >\n        {{ 'skyux_angular_tree_clear_all' | skyLibResources }}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-expand-all-btn\"\n        title=\"{{ 'skyux_angular_tree_expand_all' | skyLibResources }}\"\n        type=\"button\"\n        (click)=\"onExpandAllClick()\"\n      >\n        <sky-icon icon=\"angle-double-down\"> </sky-icon>\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n        title=\"{{ 'skyux_angular_tree_collapse_all' | skyLibResources }}\"\n        type=\"button\"\n        (click)=\"onCollapseAllClick()\"\n      >\n        <sky-icon icon=\"angle-double-up\"> </sky-icon>\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar>\n</div>\n" }]
+        }], propDecorators: { showSelectButtons: [{
+                type: Input
+            }], clearAllClick: [{
+                type: Output
+            }], collapseAllClick: [{
+                type: Output
+            }], expandAllClick: [{
+                type: Output
+            }], selectAllClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Wraps the Angular `tree-root` component as part of the `SkyAngularTreeModule` that provides
+ * SKY UX components and styles to complement the `angular-tree-component` library and apply SKY UX
+ * themes and functionality to hierarchical list views. For information about the `tree-root` component, see the
+ * [Angular tree component documentation](https://angular2-tree.readme.io/docs).
+ */
+class SkyAngularTreeWrapperComponent {
+    constructor() {
+        /**
+         * Whether to render the tree view in read-only mode.
+         * This mode disables selected and active states on the tree view nodes.
+         * @default false
+         */
+        this.readOnly = false;
+        /**
+         * Whether to use leaf-only selection mode. For tree views with
+         * [checkboxes](https://angular2-tree.readme.io/docs/tri-state-checkboxes),
+         * this mode limits user selections to leaf nodes and prevents users from selecting parent nodes.
+         * @default false
+         */
+        this.selectLeafNodesOnly = false;
+        /**
+         * Whether to use single-select mode. For tree views with
+         * [checkboxes](https://angular2-tree.readme.io/docs/tri-state-checkboxes),
+         * this mode limits user selections to one node at a time.
+         * @default false
+         */
+        this.selectSingle = false;
+        /**
+         * Whether to display a toolbar with buttons to expand and collapse all nodes and buttons to select and clear all checkboxes.
+         * The select and clear buttons only appear when you enable checkboxes.
+         * To enable [checkboxes](https://angular2-tree.readme.io/docs/tri-state-checkboxes).
+         * @default false
+         */
+        this.showToolbar = false;
+        this.selectableNodeIds = {};
+    }
+    ngAfterViewInit() {
+        if (this.selectSingle &&
+            this.treeComponent?.treeModel.options.useTriState) {
+            console.warn('Single select mode should not be enabled while the tree is in triState mode (cascading selection). ' +
+                'Please set "useTriState" to "false" if you want to remain in single select mode.');
+        }
+        this.#overrideActionMapping();
+    }
+    multiselectable() {
+        return (!!this.treeComponent &&
+            this.treeComponent.treeModel.options.useCheckbox &&
+            !this.selectSingle);
+    }
+    onClearAllClick() {
+        /* istanbul ignore else */
+        if (!this.selectSingle && this.treeComponent) {
+            const currentState = this.treeComponent.treeModel.getState();
+            this.treeComponent.state = {
+                ...currentState,
+                selectedLeafNodeIds: {},
+            };
+        }
+    }
+    onCollapseAllClick() {
+        this.treeComponent?.treeModel.collapseAll();
+    }
+    onExpandAllClick() {
+        this.treeComponent?.treeModel.expandAll();
+    }
+    onSelectAllClick() {
+        /* istanbul ignore else */
+        if (!this.selectSingle && this.treeComponent) {
+            // Get a list of all node ids that are selectable.
+            this.selectableNodeIds = {};
+            const getSelectableNodeIds = (node) => {
+                const selectable = node.isSelectable() &&
+                    !(node.hasChildren && this.selectLeafNodesOnly);
+                if (selectable && !node.data.virtual) {
+                    this.selectableNodeIds[node.id] = true;
+                }
+                if (!node.children) {
+                    return;
+                }
+                node.children.forEach((child) => getSelectableNodeIds(child));
+            };
+            getSelectableNodeIds(this.treeComponent.treeModel.virtualRoot);
+            // Update tree state with new list of selected node ids.
+            const currentState = this.treeComponent.treeModel.getState();
+            this.treeComponent.state = {
+                ...currentState,
+                selectedLeafNodeIds: this.selectableNodeIds,
+            };
+        }
+    }
+    showSelectButtons() {
+        return (!!this.treeComponent &&
+            this.treeComponent.treeModel.options.useCheckbox &&
+            !this.selectSingle);
+    }
+    #isSelectable(node) {
+        return node.isLeaf || !node.hasChildren || !this.selectLeafNodesOnly;
+    }
+    #nodeDefaultAction(tree, node, event) {
+        if (this.readOnly) {
+            return;
+        }
+        if (node.options.useCheckbox && this.#isSelectable(node)) {
+            this.#toggleSelected(node, event);
+        }
+        else {
+            TREE_ACTIONS.TOGGLE_ACTIVE(tree, node, event);
+        }
+        return;
+    }
+    #onKeyDownAction(tree, node, event) {
+        const targetNodeId = event.target.getAttribute('data-node-id');
+        // Key press did not happen on the node.
+        if (targetNodeId !== node.id.toString()) {
+            // angular-tree-component will preventDefault() on anything using a key action handler,
+            // thus stopping "enter" and "space" keys to throw "click" events on interactive elements.
+            // This logic ensures components looking for "clicks" on those keystrokes still work (dropdown component).
+            // https://github.com/500tech/angular-tree-component/blob/master/lib/models/tree.model.ts#L341
+            /* istanbul ignore else */
+            if (event.defaultPrevented) {
+                event.target.click();
+            }
+            return;
+        }
+        this.#nodeDefaultAction(tree, node, event);
+    }
+    #overrideActionMapping() {
+        const defaultActionMapping = this.treeComponent?.treeModel.options.actionMapping;
+        if (defaultActionMapping?.mouse) {
+            // Override default click/enter/space action to check for unsupported options (leaf node, single-select).
+            defaultActionMapping.mouse.click = (tree, node, event) => this.#nodeDefaultAction(tree, node, event);
+        }
+        if (defaultActionMapping?.keys) {
+            defaultActionMapping.keys[KEYS.SPACE] = (tree, node, event) => this.#onKeyDownAction(tree, node, event);
+            defaultActionMapping.keys[KEYS.ENTER] = (tree, node, event) => this.#onKeyDownAction(tree, node, event);
+            // Disable left/right arrow keys to support navigating through interactive elements with keyboard.
+            // See onArrowLeft() / onArrowRight() methods inside the angular-tree-node.component.ts.
+            /* istanbul ignore next */
+            defaultActionMapping.keys[KEYS.RIGHT] = (tree, node, $event) => undefined;
+            /* istanbul ignore next */
+            defaultActionMapping.keys[KEYS.LEFT] = (tree, node, $event) => undefined;
+            /* istanbul ignore next */
+            defaultActionMapping.keys[KEYS.DOWN] = (tree, node, $event) => undefined;
+            /* istanbul ignore next */
+            defaultActionMapping.keys[KEYS.UP] = (tree, node, $event) => undefined;
+        }
+    }
+    #toggleSelected(node, event) {
+        // If single-selection is enabled, only select the node clicked.
+        if (this.selectSingle && !node.isSelected) {
+            const oldState = this.treeComponent?.treeModel.getState();
+            const newState = {
+                expandedNodeIds: oldState?.expandedNodeIds,
+                selectedLeafNodeIds: Object.assign({}, node.id, { [node.id]: true }),
+                activeNodeIds: oldState?.activeNodeIds,
+                hiddenNodeIds: oldState?.hiddenNodeIds,
+                focusedNodeId: node.id,
+            };
+            // Reconstruct the state in one go, so we don't create multiple events for the consumer.
+            this.treeComponent?.treeModel.setState(newState);
+        }
+        else {
+            TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAngularTreeWrapperComponent, selector: "sky-angular-tree-wrapper", inputs: { readOnly: "readOnly", selectLeafNodesOnly: "selectLeafNodesOnly", selectSingle: "selectSingle", showToolbar: "showToolbar" }, queries: [{ propertyName: "treeComponent", first: true, predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-angular-tree-wrapper\"\n  [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n  <sky-angular-tree-toolbar\n    *ngIf=\"showToolbar\"\n    [showSelectButtons]=\"showSelectButtons()\"\n    (clearAllClick)=\"onClearAllClick()\"\n    (collapseAllClick)=\"onCollapseAllClick()\"\n    (expandAllClick)=\"onExpandAllClick()\"\n    (selectAllClick)=\"onSelectAllClick()\"\n  >\n  </sky-angular-tree-toolbar>\n  <div\n    class=\"sky-angular-tree-root\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"multiselectable()\"\n  >\n    <ng-content select=\"tree-root\"></ng-content>\n  </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-angular-tree-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-angular-tree-wrapper\"\n  [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n  <sky-angular-tree-toolbar\n    *ngIf=\"showToolbar\"\n    [showSelectButtons]=\"showSelectButtons()\"\n    (clearAllClick)=\"onClearAllClick()\"\n    (collapseAllClick)=\"onCollapseAllClick()\"\n    (expandAllClick)=\"onExpandAllClick()\"\n    (selectAllClick)=\"onSelectAllClick()\"\n  >\n  </sky-angular-tree-toolbar>\n  <div\n    class=\"sky-angular-tree-root\"\n    role=\"tree\"\n    [attr.aria-multiselectable]=\"multiselectable()\"\n  >\n    <ng-content select=\"tree-root\"></ng-content>\n  </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"] }]
+        }], propDecorators: { readOnly: [{
+                type: Input
+            }], selectLeafNodesOnly: [{
+                type: Input
+            }], selectSingle: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], treeComponent: [{
+                type: ContentChild,
+                args: [TreeComponent]
+            }] } });
+
+/**
+ * Replaces the default tree node template with a SKY UX node as part of the `SkyAngularTreeModule` that
+ * provides SKY UX components and styles to complement the `angular-tree-component` library and apply SKY UX
+ * themes and functionality to hierarchical list views. You must wrap this component in an `ng-template`
+ * tag with the template reference variable `#treeNodeFullTemplate`. For information about tree node templates,
+ * see the [Angular tree component documentation](https://angular2-tree.readme.io/docs/templates).
+ * To display context menus with actions for individual items in hierarchical lists, place
+ * [dropdowns](https://developer.blackbaud.com/skyux-popovers/docs/dropdown?docs-active-tab=design) inside the
+ * Angular tree node component, which automatically handles styling and positioning for context menus.
+ */
+class SkyAngularTreeNodeComponent {
+    set childFocusIndex(value) {
+        if (value !== this.#_childFocusIndex) {
+            this.#_childFocusIndex = value;
+            if (this.#focusableChildren.length > 0 && value !== undefined) {
+                this.#focusableChildren[value].focus();
+            }
+            else {
+                this.nodeContentWrapperRef?.nativeElement.focus();
+            }
+        }
+    }
+    get childFocusIndex() {
+        return this.#_childFocusIndex;
+    }
+    set focused(value) {
+        this.tabIndex = value ? 0 : -1;
+        if (value) {
+            this.nodeContentWrapperRef?.nativeElement.focus();
+        }
+    }
+    set isPartiallySelected(value) {
+        if (value !== this.#_isPartiallySelected) {
+            this.#_isPartiallySelected = value;
+            this.#changeDetectorRef.markForCheck();
+        }
+    }
+    get isPartiallySelected() {
+        return this.#_isPartiallySelected;
+    }
+    set isSelected(value) {
+        if (value !== this.#_isSelected) {
+            this.#_isSelected = value;
+            this.#changeDetectorRef.markForCheck();
+        }
+    }
+    get isSelected() {
+        return this.#_isSelected;
+    }
+    set tabIndex(value) {
+        this.#_tabIndex = value;
+    }
+    get tabIndex() {
+        return this.#_tabIndex;
+    }
+    #focusableChildren = [];
+    #mouseDown = false;
+    #_childFocusIndex;
+    #_isPartiallySelected = false;
+    #_isSelected = false;
+    #_tabIndex = -1;
+    #changeDetectorRef;
+    #adapterService;
+    #skyAngularTreeWrapper;
+    constructor(changeDetectorRef, adapterService, skyAngularTreeWrapper) {
+        this.#changeDetectorRef = changeDetectorRef;
+        this.#adapterService = adapterService;
+        this.#skyAngularTreeWrapper = skyAngularTreeWrapper;
+    }
+    ngOnInit() {
+        if (!this.#skyAngularTreeWrapper) {
+            console.error(`<sky-angular-tree-node-wrapper> must be wrapped inside a <sky-angular-tree-wrapper> component.`);
+        }
+        if (this.node) {
+            // Because we're binding the checkbox to node's children properties, we need to manually control change detection.
+            // Here, we listen to the tree's state and force change detection in the setters if the value has changed.
+            this.node.treeModel.subscribeToState((state) => {
+                if (this.node) {
+                    this.isSelected = this.node.isSelected;
+                    this.isPartiallySelected = this.node.isPartiallySelected;
+                    if (state.focusedNodeId) {
+                        this.focused = state.focusedNodeId === this.node.id;
+                    }
+                }
+            });
+            // Make the first root node tabbable.
+            if (this.node.isRoot && this.node.index === 0) {
+                this.tabIndex = 0;
+            }
+        }
+    }
+    ngAfterViewInit() {
+        // Wait 1s for the node to render, then reset all child tabIndexes to -1.
+        // Units smaller than 1s may consistently fail if there are many nodes, or multiple trees are on the same screen.
+        setTimeout(() => {
+            if (this.nodeContentWrapperRef) {
+                this.#focusableChildren = this.#adapterService.getFocusableChildren(this.nodeContentWrapperRef.nativeElement);
+                this.#adapterService.setTabIndexOfFocusableEls(this.nodeContentWrapperRef.nativeElement, -1);
+            }
+        }, 1000);
+    }
+    /**
+     * If single-select, set aria-selected=true for the selected node and undefined for all the others.
+     * For multiple-select, set aria-selected to either true or false.
+     * If node cannot be selected, aria-selected should be undefined (e.g. parent nodes in leaf-select-only mode).
+     * @internal
+     */
+    ariaSelected() {
+        if (!this.#skyAngularTreeWrapper) {
+            return;
+        }
+        if (this.#skyAngularTreeWrapper.selectSingle) {
+            return this.isSelected ? true : undefined;
+        }
+        if (!this.#isSelectable()) {
+            return;
+        }
+        return !!this.isSelected;
+    }
+    showCheckbox() {
+        // Check for checkbox mode enabled, but also respect leaf-node and single-select settings.
+        return (!!this.node &&
+            this.node.options.useCheckbox &&
+            this.#isSelectable() &&
+            (!this.#skyAngularTreeWrapper ||
+                !this.#skyAngularTreeWrapper.selectSingle));
+    }
+    showSelectedClass() {
+        return this.#isSelectable() && this.isSelected && !this.isPartiallySelected;
+    }
+    showActiveClass() {
+        return (!!this.node &&
+            this.node.isActive &&
+            !this.node.treeModel.options.useCheckbox);
+    }
+    showTogglePlaceholder() {
+        return (!this.node?.hasChildren &&
+            !this.#skyAngularTreeWrapper?.selectLeafNodesOnly);
+    }
+    onFocus() {
+        // <tree-node-content> has its own click handler, so we need to check if this focus event
+        // is coming from the mouse click or the keyboard to prevent the logic from running twice.
+        if (!this.#mouseDown) {
+            this.node?.treeModel.setFocus(true);
+            this.node?.focus();
+            this.childFocusIndex = undefined;
+        }
+    }
+    onMouseDown() {
+        this.#mouseDown = true;
+    }
+    onMouseUp() {
+        this.#mouseDown = false;
+    }
+    onKeyDown(event) {
+        /* istanbul ignore else */
+        if (document.activeElement === event.target) {
+            const key = event.key.toLowerCase();
+            switch (key) {
+                case 'up':
+                case 'arrowup':
+                    // Focus on previous node.
+                    this.node?.treeModel.focusPreviousNode();
+                    break;
+                case 'down':
+                case 'arrowdown':
+                    // Focus on next node.
+                    this.node?.treeModel.focusNextNode();
+                    break;
+                case 'left':
+                case 'arrowleft':
+                    // Cycle backwards through interactive child elements
+                    // If user reaches the beginning, activate drill up.
+                    /* istanbul ignore else */
+                    if (this.childFocusIndex !== undefined) {
+                        if (this.childFocusIndex === 0) {
+                            this.childFocusIndex = undefined;
+                        }
+                        else {
+                            this.childFocusIndex--;
+                        }
+                    }
+                    else {
+                        this.node?.setIsExpanded(false);
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+                case 'right':
+                case 'arrowright':
+                    // Cycle forward through interactive child elements.
+                    // If user reaches the end, activate drill down.
+                    /* istanbul ignore else */
+                    if (this.#focusableChildren.length <= 0 ||
+                        this.childFocusIndex === this.#focusableChildren.length - 1) {
+                        this.node?.setIsExpanded(true);
+                    }
+                    else {
+                        if (this.childFocusIndex === undefined) {
+                            this.childFocusIndex = 0;
+                        }
+                        else {
+                            this.childFocusIndex++;
+                        }
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    #isSelectable() {
+        if (this.#skyAngularTreeWrapper) {
+            return (!!this.node &&
+                (this.node.isLeaf ||
+                    !this.node.hasChildren ||
+                    !this.#skyAngularTreeWrapper.selectLeafNodesOnly));
+        }
+        else {
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyAngularTreeAdapterService }, { token: SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAngularTreeNodeComponent, selector: "sky-angular-tree-node", inputs: { index: "index", node: "node", templates: "templates" }, providers: [SkyAngularTreeAdapterService], viewQueries: [{ propertyName: "nodeContentWrapperRef", first: true, predicate: ["nodeContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *ngIf=\"node && index !== undefined\"\n  [class]=\"node.getClass()\"\n  [class.tree-node]=\"true\"\n  [class.tree-node-active]=\"node.isActive\"\n  [class.tree-node-collapsed]=\"node.isCollapsed && node.hasChildren\"\n  [class.tree-node-expanded]=\"node.isExpanded && node.hasChildren\"\n  [class.tree-node-focused]=\"node.isFocused\"\n  [class.tree-node-leaf]=\"node.isLeaf\"\n>\n  <tree-node-drop-slot\n    *ngIf=\"index === 0\"\n    [dropIndex]=\"node.index\"\n    [node]=\"node.parent\"\n  >\n  </tree-node-drop-slot>\n\n  <!-- #region <tree-node-wrapper> custom template --->\n  <div\n    class=\"node-wrapper\"\n    role=\"treeitem\"\n    [allowDragoverStyling]=\"node.allowDragoverStyling()\"\n    [attr.aria-current]=\"node.isActive\"\n    [attr.aria-expanded]=\"node.children?.length ? node.isExpanded : null\"\n    [attr.aria-selected]=\"ariaSelected()\"\n    [attr.data-node-id]=\"node.id\"\n    [attr.tabindex]=\"tabIndex\"\n    [class.sky-angular-tree-node-active]=\"showActiveClass()\"\n    [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n    [style.padding-left]=\"node.getNodePadding()\"\n    [treeAllowDrop]=\"node.allowDrop\"\n    [treeDrag]=\"node\"\n    [treeDragEnabled]=\"node.allowDrag()\"\n    (contextmenu)=\"node.mouseAction('contextMenu', $event)\"\n    (dblclick)=\"node.mouseAction('dblClick', $event)\"\n    (focus)=\"onFocus()\"\n    (mousedown)=\"onMouseDown()\"\n    (mouseup)=\"onMouseUp()\"\n    (keydown)=\"onKeyDown($event)\"\n    (treeDrop)=\"node.onDrop($event)\"\n    (treeDropDragEnter)=\"node.mouseAction('dragEnter', $event)\"\n    (treeDropDragLeave)=\"node.mouseAction('dragLeave', $event)\"\n    (treeDropDragOver)=\"node.mouseAction('dragOver', $event)\"\n    #nodeContentWrapper\n  >\n    <!-- #region <tree-node-expander> custom template --->\n    <div class=\"sky-toggle-children-wrapper\">\n      <button\n        *ngIf=\"node.hasChildren\"\n        class=\"sky-btn sky-btn-link sky-toggle-children\"\n        tabindex=\"-1\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          'skyux_angular_tree_click_to_expand' | skyLibResources\n        \"\n        [class.toggle-children-wrapper-expanded]=\"node.isExpanded\"\n        [class.toggle-children-wrapper-collapsed]=\"node.isCollapsed\"\n        (click)=\"node.mouseAction('expanderClick', $event)\"\n      >\n        <sky-icon\n          [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n          size=\"sm\"\n        >\n        </sky-icon>\n      </button>\n      <span *ngIf=\"showTogglePlaceholder()\" class=\"toggle-children-placeholder\">\n      </span>\n    </div>\n    <!-- #endregion <tree-node-expander> --->\n\n    <!-- Note: we've made changes to the click event, tabindex, and classes when compared to the original template. -->\n    <!-- https://github.com/500tech/angular-tree-component/blob/master/lib/components/tree-node-wrapper.component.ts -->\n    <div class=\"node-content-wrapper\">\n      <sky-checkbox\n        *ngIf=\"showCheckbox()\"\n        [checked]=\"isSelected\"\n        [id]=\"node.data.id\"\n        [label]=\"node.data.name\"\n        [indeterminate]=\"isPartiallySelected\"\n        (change)=\"node.mouseAction('checkboxClick', $event)\"\n      >\n      </sky-checkbox>\n\n      <sky-angular-tree-context-menu>\n        <ng-content select=\"sky-dropdown\"></ng-content>\n      </sky-angular-tree-context-menu>\n\n      <tree-node-content\n        [index]=\"index\"\n        [node]=\"node\"\n        [template]=\"templates?.treeNodeTemplate\"\n        (click)=\"node.mouseAction('click', $event)\"\n      >\n      </tree-node-content\n      ><span class=\"sky-control-help-container\"\n        ><ng-content select=\".sky-control-help\"></ng-content\n      ></span>\n    </div>\n  </div>\n\n  <ng-container\n    [ngTemplateOutlet]=\"templates?.treeNodeWrapperTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: node,\n      node: node,\n      index: index,\n      templates: templates\n    }\"\n  >\n  </ng-container>\n  <!-- #endregion <tree-node-wrapper> -->\n\n  <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\">\n  </tree-node-children>\n\n  <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\">\n  </tree-node-drop-slot>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i6.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i6.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i6.TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: i6.TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-angular-tree-node', providers: [SkyAngularTreeAdapterService], template: "<div\n  *ngIf=\"node && index !== undefined\"\n  [class]=\"node.getClass()\"\n  [class.tree-node]=\"true\"\n  [class.tree-node-active]=\"node.isActive\"\n  [class.tree-node-collapsed]=\"node.isCollapsed && node.hasChildren\"\n  [class.tree-node-expanded]=\"node.isExpanded && node.hasChildren\"\n  [class.tree-node-focused]=\"node.isFocused\"\n  [class.tree-node-leaf]=\"node.isLeaf\"\n>\n  <tree-node-drop-slot\n    *ngIf=\"index === 0\"\n    [dropIndex]=\"node.index\"\n    [node]=\"node.parent\"\n  >\n  </tree-node-drop-slot>\n\n  <!-- #region <tree-node-wrapper> custom template --->\n  <div\n    class=\"node-wrapper\"\n    role=\"treeitem\"\n    [allowDragoverStyling]=\"node.allowDragoverStyling()\"\n    [attr.aria-current]=\"node.isActive\"\n    [attr.aria-expanded]=\"node.children?.length ? node.isExpanded : null\"\n    [attr.aria-selected]=\"ariaSelected()\"\n    [attr.data-node-id]=\"node.id\"\n    [attr.tabindex]=\"tabIndex\"\n    [class.sky-angular-tree-node-active]=\"showActiveClass()\"\n    [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n    [style.padding-left]=\"node.getNodePadding()\"\n    [treeAllowDrop]=\"node.allowDrop\"\n    [treeDrag]=\"node\"\n    [treeDragEnabled]=\"node.allowDrag()\"\n    (contextmenu)=\"node.mouseAction('contextMenu', $event)\"\n    (dblclick)=\"node.mouseAction('dblClick', $event)\"\n    (focus)=\"onFocus()\"\n    (mousedown)=\"onMouseDown()\"\n    (mouseup)=\"onMouseUp()\"\n    (keydown)=\"onKeyDown($event)\"\n    (treeDrop)=\"node.onDrop($event)\"\n    (treeDropDragEnter)=\"node.mouseAction('dragEnter', $event)\"\n    (treeDropDragLeave)=\"node.mouseAction('dragLeave', $event)\"\n    (treeDropDragOver)=\"node.mouseAction('dragOver', $event)\"\n    #nodeContentWrapper\n  >\n    <!-- #region <tree-node-expander> custom template --->\n    <div class=\"sky-toggle-children-wrapper\">\n      <button\n        *ngIf=\"node.hasChildren\"\n        class=\"sky-btn sky-btn-link sky-toggle-children\"\n        tabindex=\"-1\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          'skyux_angular_tree_click_to_expand' | skyLibResources\n        \"\n        [class.toggle-children-wrapper-expanded]=\"node.isExpanded\"\n        [class.toggle-children-wrapper-collapsed]=\"node.isCollapsed\"\n        (click)=\"node.mouseAction('expanderClick', $event)\"\n      >\n        <sky-icon\n          [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n          size=\"sm\"\n        >\n        </sky-icon>\n      </button>\n      <span *ngIf=\"showTogglePlaceholder()\" class=\"toggle-children-placeholder\">\n      </span>\n    </div>\n    <!-- #endregion <tree-node-expander> --->\n\n    <!-- Note: we've made changes to the click event, tabindex, and classes when compared to the original template. -->\n    <!-- https://github.com/500tech/angular-tree-component/blob/master/lib/components/tree-node-wrapper.component.ts -->\n    <div class=\"node-content-wrapper\">\n      <sky-checkbox\n        *ngIf=\"showCheckbox()\"\n        [checked]=\"isSelected\"\n        [id]=\"node.data.id\"\n        [label]=\"node.data.name\"\n        [indeterminate]=\"isPartiallySelected\"\n        (change)=\"node.mouseAction('checkboxClick', $event)\"\n      >\n      </sky-checkbox>\n\n      <sky-angular-tree-context-menu>\n        <ng-content select=\"sky-dropdown\"></ng-content>\n      </sky-angular-tree-context-menu>\n\n      <tree-node-content\n        [index]=\"index\"\n        [node]=\"node\"\n        [template]=\"templates?.treeNodeTemplate\"\n        (click)=\"node.mouseAction('click', $event)\"\n      >\n      </tree-node-content\n      ><span class=\"sky-control-help-container\"\n        ><ng-content select=\".sky-control-help\"></ng-content\n      ></span>\n    </div>\n  </div>\n\n  <ng-container\n    [ngTemplateOutlet]=\"templates?.treeNodeWrapperTemplate\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: node,\n      node: node,\n      index: index,\n      templates: templates\n    }\"\n  >\n  </ng-container>\n  <!-- #endregion <tree-node-wrapper> -->\n\n  <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\">\n  </tree-node-children>\n\n  <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\">\n  </tree-node-drop-slot>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyAngularTreeAdapterService }, { type: SkyAngularTreeWrapperComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { index: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }], nodeContentWrapperRef: [{
+                type: ViewChild,
+                args: ['nodeContentWrapper', { read: ElementRef }]
+            }] } });
+
+class SkyAngularTreeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
+            SkyAngularTreeNodeComponent,
+            SkyAngularTreeWrapperComponent,
+            SkyTreeViewToolbarComponent], imports: [CommonModule,
+            SkyAngularTreeComponentResourcesModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyToolbarModule,
+            TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
+            SkyAngularTreeComponentResourcesModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyToolbarModule,
+            TreeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyAngularTreeContextMenuComponent,
+                        SkyAngularTreeNodeComponent,
+                        SkyAngularTreeWrapperComponent,
+                        SkyTreeViewToolbarComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyAngularTreeComponentResourcesModule,
+                        SkyCheckboxModule,
+                        SkyIconModule,
+                        SkyToolbarModule,
+                        TreeModule,
+                    ],
+                    providers: [SkyCoreAdapterService],
+                    exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyAngularTreeModule, SkyAngularTreeWrapperComponent as λ1, SkyAngularTreeNodeComponent as λ2 };
+//# sourceMappingURL=skyux-angular-tree-component.mjs.map