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

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

@@ -1,625 +0,0 @@
-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 '@circlon/angular-tree-component';
-import { TREE_ACTIONS, KEYS, TreeComponent, TreeModule } from '@circlon/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';
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
-
-/**
- * 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 {
-}
-SkyAngularTreeComponentResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAngularTreeComponentResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] });
-SkyAngularTreeComponentResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyAngularTreeComponentResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyAngularTreeComponentResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
-/**
- * @internal
- */
-class SkyAngularTreeContextMenuComponent {
-}
-SkyAngularTreeContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAngularTreeContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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" }]
-        }] });
-
-var _SkyAngularTreeAdapterService_coreAdapterService;
-/**
- * @internal
- */
-class SkyAngularTreeAdapterService {
-    constructor(coreAdapterService) {
-        _SkyAngularTreeAdapterService_coreAdapterService.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyAngularTreeAdapterService_coreAdapterService, coreAdapterService, "f");
-    }
-    getFocusableChildren(element) {
-        return __classPrivateFieldGet(this, _SkyAngularTreeAdapterService_coreAdapterService, "f").getFocusableChildren(element);
-    }
-    setTabIndexOfFocusableEls(element, tabIndex) {
-        const focusableEls = __classPrivateFieldGet(this, _SkyAngularTreeAdapterService_coreAdapterService, "f").getFocusableChildren(element);
-        let index = focusableEls.length;
-        while (index--) {
-            focusableEls[index].tabIndex = tabIndex;
-        }
-    }
-}
-_SkyAngularTreeAdapterService_coreAdapterService = new WeakMap();
-SkyAngularTreeAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAngularTreeAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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();
-    }
-}
-SkyTreeViewToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyTreeViewToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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
-            }] } });
-
-var _SkyAngularTreeWrapperComponent_instances, _SkyAngularTreeWrapperComponent_isSelectable, _SkyAngularTreeWrapperComponent_nodeDefaultAction, _SkyAngularTreeWrapperComponent_onKeyDownAction, _SkyAngularTreeWrapperComponent_overrideActionMapping, _SkyAngularTreeWrapperComponent_toggleSelected;
-/**
- * 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() {
-        _SkyAngularTreeWrapperComponent_instances.add(this);
-        /**
-         * 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() {
-        var _a;
-        if (this.selectSingle &&
-            ((_a = this.treeComponent) === null || _a === void 0 ? void 0 : _a.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.');
-        }
-        __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_overrideActionMapping).call(this);
-    }
-    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 = Object.assign(Object.assign({}, currentState), { selectedLeafNodeIds: {} });
-        }
-    }
-    onCollapseAllClick() {
-        var _a;
-        (_a = this.treeComponent) === null || _a === void 0 ? void 0 : _a.treeModel.collapseAll();
-    }
-    onExpandAllClick() {
-        var _a;
-        (_a = this.treeComponent) === null || _a === void 0 ? void 0 : _a.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 = Object.assign(Object.assign({}, currentState), { selectedLeafNodeIds: this.selectableNodeIds });
-        }
-    }
-    showSelectButtons() {
-        return (!!this.treeComponent &&
-            this.treeComponent.treeModel.options.useCheckbox &&
-            !this.selectSingle);
-    }
-}
-_SkyAngularTreeWrapperComponent_instances = new WeakSet(), _SkyAngularTreeWrapperComponent_isSelectable = function _SkyAngularTreeWrapperComponent_isSelectable(node) {
-    return node.isLeaf || !node.hasChildren || !this.selectLeafNodesOnly;
-}, _SkyAngularTreeWrapperComponent_nodeDefaultAction = function _SkyAngularTreeWrapperComponent_nodeDefaultAction(tree, node, event) {
-    if (this.readOnly) {
-        return;
-    }
-    if (node.options.useCheckbox && __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_isSelectable).call(this, node)) {
-        __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_toggleSelected).call(this, node, event);
-    }
-    else {
-        TREE_ACTIONS.TOGGLE_ACTIVE(tree, node, event);
-    }
-    return;
-}, _SkyAngularTreeWrapperComponent_onKeyDownAction = function _SkyAngularTreeWrapperComponent_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;
-    }
-    __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_nodeDefaultAction).call(this, tree, node, event);
-}, _SkyAngularTreeWrapperComponent_overrideActionMapping = function _SkyAngularTreeWrapperComponent_overrideActionMapping() {
-    var _a;
-    const defaultActionMapping = (_a = this.treeComponent) === null || _a === void 0 ? void 0 : _a.treeModel.options.actionMapping;
-    if (defaultActionMapping === null || defaultActionMapping === void 0 ? void 0 : defaultActionMapping.mouse) {
-        // Override default click/enter/space action to check for unsupported options (leaf node, single-select).
-        defaultActionMapping.mouse.click = (tree, node, event) => __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_nodeDefaultAction).call(this, tree, node, event);
-    }
-    if (defaultActionMapping === null || defaultActionMapping === void 0 ? void 0 : defaultActionMapping.keys) {
-        defaultActionMapping.keys[KEYS.SPACE] = (tree, node, event) => __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_onKeyDownAction).call(this, tree, node, event);
-        defaultActionMapping.keys[KEYS.ENTER] = (tree, node, event) => __classPrivateFieldGet(this, _SkyAngularTreeWrapperComponent_instances, "m", _SkyAngularTreeWrapperComponent_onKeyDownAction).call(this, 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;
-    }
-}, _SkyAngularTreeWrapperComponent_toggleSelected = function _SkyAngularTreeWrapperComponent_toggleSelected(node, event) {
-    var _a, _b;
-    // If single-selection is enabled, only select the node clicked.
-    if (this.selectSingle && !node.isSelected) {
-        const oldState = (_a = this.treeComponent) === null || _a === void 0 ? void 0 : _a.treeModel.getState();
-        const newState = {
-            expandedNodeIds: oldState === null || oldState === void 0 ? void 0 : oldState.expandedNodeIds,
-            selectedLeafNodeIds: Object.assign({}, node.id, { [node.id]: true }),
-            activeNodeIds: oldState === null || oldState === void 0 ? void 0 : oldState.activeNodeIds,
-            hiddenNodeIds: oldState === null || oldState === void 0 ? void 0 : oldState.hiddenNodeIds,
-            focusedNodeId: node.id,
-        };
-        // Reconstruct the state in one go, so we don't create multiple events for the consumer.
-        (_b = this.treeComponent) === null || _b === void 0 ? void 0 : _b.treeModel.setState(newState);
-    }
-    else {
-        TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
-    }
-};
-SkyAngularTreeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAngularTreeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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]
-            }] } });
-
-var _SkyAngularTreeNodeComponent_instances, _SkyAngularTreeNodeComponent_focusableChildren, _SkyAngularTreeNodeComponent_mouseDown, _SkyAngularTreeNodeComponent__childFocusIndex, _SkyAngularTreeNodeComponent__isPartiallySelected, _SkyAngularTreeNodeComponent__isSelected, _SkyAngularTreeNodeComponent__tabIndex, _SkyAngularTreeNodeComponent_changeDetectorRef, _SkyAngularTreeNodeComponent_adapterService, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, _SkyAngularTreeNodeComponent_isSelectable;
-/**
- * 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) {
-        var _a;
-        if (value !== __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__childFocusIndex, "f")) {
-            __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent__childFocusIndex, value, "f");
-            if (__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_focusableChildren, "f").length > 0 && value !== undefined) {
-                __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_focusableChildren, "f")[value].focus();
-            }
-            else {
-                (_a = this.nodeContentWrapperRef) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
-            }
-        }
-    }
-    get childFocusIndex() {
-        return __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__childFocusIndex, "f");
-    }
-    set focused(value) {
-        var _a;
-        this.tabIndex = value ? 0 : -1;
-        if (value) {
-            (_a = this.nodeContentWrapperRef) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
-        }
-    }
-    set isPartiallySelected(value) {
-        if (value !== __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__isPartiallySelected, "f")) {
-            __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent__isPartiallySelected, value, "f");
-            __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_changeDetectorRef, "f").markForCheck();
-        }
-    }
-    get isPartiallySelected() {
-        return __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__isPartiallySelected, "f");
-    }
-    set isSelected(value) {
-        if (value !== __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__isSelected, "f")) {
-            __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent__isSelected, value, "f");
-            __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_changeDetectorRef, "f").markForCheck();
-        }
-    }
-    get isSelected() {
-        return __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__isSelected, "f");
-    }
-    set tabIndex(value) {
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent__tabIndex, value, "f");
-    }
-    get tabIndex() {
-        return __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent__tabIndex, "f");
-    }
-    constructor(changeDetectorRef, adapterService, skyAngularTreeWrapper) {
-        _SkyAngularTreeNodeComponent_instances.add(this);
-        _SkyAngularTreeNodeComponent_focusableChildren.set(this, []);
-        _SkyAngularTreeNodeComponent_mouseDown.set(this, false);
-        _SkyAngularTreeNodeComponent__childFocusIndex.set(this, void 0);
-        _SkyAngularTreeNodeComponent__isPartiallySelected.set(this, false);
-        _SkyAngularTreeNodeComponent__isSelected.set(this, false);
-        _SkyAngularTreeNodeComponent__tabIndex.set(this, -1);
-        _SkyAngularTreeNodeComponent_changeDetectorRef.set(this, void 0);
-        _SkyAngularTreeNodeComponent_adapterService.set(this, void 0);
-        _SkyAngularTreeNodeComponent_skyAngularTreeWrapper.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_changeDetectorRef, changeDetectorRef, "f");
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_adapterService, adapterService, "f");
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, skyAngularTreeWrapper, "f");
-    }
-    ngOnInit() {
-        if (!__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f")) {
-            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) {
-                __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_focusableChildren, __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_adapterService, "f").getFocusableChildren(this.nodeContentWrapperRef.nativeElement), "f");
-                __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_adapterService, "f").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 (!__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f")) {
-            return;
-        }
-        if (__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f").selectSingle) {
-            return this.isSelected ? true : undefined;
-        }
-        if (!__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_instances, "m", _SkyAngularTreeNodeComponent_isSelectable).call(this)) {
-            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 &&
-            __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_instances, "m", _SkyAngularTreeNodeComponent_isSelectable).call(this) &&
-            (!__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f") ||
-                !__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f").selectSingle));
-    }
-    showSelectedClass() {
-        return __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_instances, "m", _SkyAngularTreeNodeComponent_isSelectable).call(this) && this.isSelected && !this.isPartiallySelected;
-    }
-    showActiveClass() {
-        return (!!this.node &&
-            this.node.isActive &&
-            !this.node.treeModel.options.useCheckbox);
-    }
-    showTogglePlaceholder() {
-        var _a, _b;
-        return (!((_a = this.node) === null || _a === void 0 ? void 0 : _a.hasChildren) &&
-            !((_b = __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f")) === null || _b === void 0 ? void 0 : _b.selectLeafNodesOnly));
-    }
-    onFocus() {
-        var _a, _b;
-        // <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 (!__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_mouseDown, "f")) {
-            (_a = this.node) === null || _a === void 0 ? void 0 : _a.treeModel.setFocus(true);
-            (_b = this.node) === null || _b === void 0 ? void 0 : _b.focus();
-            this.childFocusIndex = undefined;
-        }
-    }
-    onMouseDown() {
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_mouseDown, true, "f");
-    }
-    onMouseUp() {
-        __classPrivateFieldSet(this, _SkyAngularTreeNodeComponent_mouseDown, false, "f");
-    }
-    onKeyDown(event) {
-        var _a, _b, _c, _d;
-        /* istanbul ignore else */
-        if (document.activeElement === event.target) {
-            const key = event.key.toLowerCase();
-            switch (key) {
-                case 'up':
-                case 'arrowup':
-                    // Focus on previous node.
-                    (_a = this.node) === null || _a === void 0 ? void 0 : _a.treeModel.focusPreviousNode();
-                    break;
-                case 'down':
-                case 'arrowdown':
-                    // Focus on next node.
-                    (_b = this.node) === null || _b === void 0 ? void 0 : _b.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 {
-                        (_c = this.node) === null || _c === void 0 ? void 0 : _c.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 (__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_focusableChildren, "f").length <= 0 ||
-                        this.childFocusIndex === __classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_focusableChildren, "f").length - 1) {
-                        (_d = this.node) === null || _d === void 0 ? void 0 : _d.setIsExpanded(true);
-                    }
-                    else {
-                        if (this.childFocusIndex === undefined) {
-                            this.childFocusIndex = 0;
-                        }
-                        else {
-                            this.childFocusIndex++;
-                        }
-                    }
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-}
-_SkyAngularTreeNodeComponent_focusableChildren = new WeakMap(), _SkyAngularTreeNodeComponent_mouseDown = new WeakMap(), _SkyAngularTreeNodeComponent__childFocusIndex = new WeakMap(), _SkyAngularTreeNodeComponent__isPartiallySelected = new WeakMap(), _SkyAngularTreeNodeComponent__isSelected = new WeakMap(), _SkyAngularTreeNodeComponent__tabIndex = new WeakMap(), _SkyAngularTreeNodeComponent_changeDetectorRef = new WeakMap(), _SkyAngularTreeNodeComponent_adapterService = new WeakMap(), _SkyAngularTreeNodeComponent_skyAngularTreeWrapper = new WeakMap(), _SkyAngularTreeNodeComponent_instances = new WeakSet(), _SkyAngularTreeNodeComponent_isSelectable = function _SkyAngularTreeNodeComponent_isSelectable() {
-    if (__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f")) {
-        return (!!this.node &&
-            (this.node.isLeaf ||
-                !this.node.hasChildren ||
-                !__classPrivateFieldGet(this, _SkyAngularTreeNodeComponent_skyAngularTreeWrapper, "f").selectLeafNodesOnly));
-    }
-    else {
-        return false;
-    }
-};
-SkyAngularTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyAngularTreeAdapterService }, { token: SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAngularTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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 {
-}
-SkyAngularTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAngularTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
-        SkyAngularTreeNodeComponent,
-        SkyAngularTreeWrapperComponent,
-        SkyTreeViewToolbarComponent], imports: [CommonModule,
-        SkyAngularTreeComponentResourcesModule,
-        SkyCheckboxModule,
-        SkyIconModule,
-        SkyToolbarModule,
-        TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] });
-SkyAngularTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
-        SkyAngularTreeComponentResourcesModule,
-        SkyCheckboxModule,
-        SkyIconModule,
-        SkyToolbarModule,
-        TreeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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