@skyux/angular-tree-component 13.7.0 → 13.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,9 @@
1
- import * as i1$1 from '@angular/common';
2
- import { CommonModule } from '@angular/common';
3
1
  import * as i0 from '@angular/core';
4
2
  import { NgModule, ChangeDetectionStrategy, Component, inject, Injectable, EventEmitter, Output, Input, ContentChild, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
5
- import * as i5 from '@blackbaud/angular-tree-component';
3
+ import * as i3 from '@skyux/i18n';
4
+ import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
5
+ import { NgTemplateOutlet } from '@angular/common';
6
+ import * as i1$1 from '@blackbaud/angular-tree-component';
6
7
  import { TREE_ACTIONS, KEYS, TreeComponent, TreeModule } from '@blackbaud/angular-tree-component';
7
8
  import { SkyCoreAdapterService, SkyContentInfoProvider } from '@skyux/core';
8
9
  import * as i2$1 from '@skyux/forms';
@@ -13,8 +14,6 @@ import * as i1 from '@skyux/icon';
13
14
  import { SkyIconModule } from '@skyux/icon';
14
15
  import * as i2 from '@skyux/layout';
15
16
  import { SkyToolbarModule } from '@skyux/layout';
16
- import * as i3 from '@skyux/i18n';
17
- import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
18
17
 
19
18
  /* istanbul ignore file */
20
19
  /**
@@ -60,11 +59,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
60
59
  */
61
60
  class SkyAngularTreeContextMenuComponent {
62
61
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
63
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAngularTreeContextMenuComponent, isStandalone: false, selector: "sky-angular-tree-context-menu", ngImport: i0, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
62
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyAngularTreeContextMenuComponent, isStandalone: true, selector: "sky-angular-tree-context-menu", ngImport: i0, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
64
63
  }
65
64
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
66
65
  type: Component,
67
- args: [{ selector: 'sky-angular-tree-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n" }]
66
+ args: [{ selector: 'sky-angular-tree-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n" }]
68
67
  }] });
69
68
 
70
69
  /**
@@ -92,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
92
91
  /**
93
92
  * @internal
94
93
  */
95
- class SkyTreeViewToolbarComponent {
94
+ class SkyAngularTreeToolbarComponent {
96
95
  constructor() {
97
96
  this.clearAllClick = new EventEmitter();
98
97
  this.collapseAllClick = new EventEmitter();
@@ -111,12 +110,12 @@ class SkyTreeViewToolbarComponent {
111
110
  onSelectAllClick() {
112
111
  this.selectAllClick.emit();
113
112
  }
114
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
115
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyTreeViewToolbarComponent, isStandalone: false, 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 @if (showSelectButtons) {\n <sky-toolbar-item>\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>\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 }\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 type=\"button\"\n [title]=\"'skyux_angular_tree_expand_all' | skyLibResources\"\n (click)=\"onExpandAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-down\" />\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n type=\"button\"\n [title]=\"'skyux_angular_tree_collapse_all' | skyLibResources\"\n (click)=\"onCollapseAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-up\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n", dependencies: [{ kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i2.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i2.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i2.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
113
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
114
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAngularTreeToolbarComponent, isStandalone: true, 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 @if (showSelectButtons) {\n <sky-toolbar-item>\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>\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 }\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 type=\"button\"\n [title]=\"'skyux_angular_tree_expand_all' | skyLibResources\"\n (click)=\"onExpandAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-down\" />\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n type=\"button\"\n [title]=\"'skyux_angular_tree_collapse_all' | skyLibResources\"\n (click)=\"onCollapseAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-up\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyI18nModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i2.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i2.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i2.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
116
115
  }
117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeToolbarComponent, decorators: [{
118
117
  type: Component,
119
- args: [{ selector: 'sky-angular-tree-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-angular-tree-toolbar\" role=\"toolbar\">\n <sky-toolbar>\n @if (showSelectButtons) {\n <sky-toolbar-item>\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>\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 }\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 type=\"button\"\n [title]=\"'skyux_angular_tree_expand_all' | skyLibResources\"\n (click)=\"onExpandAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-down\" />\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n type=\"button\"\n [title]=\"'skyux_angular_tree_collapse_all' | skyLibResources\"\n (click)=\"onCollapseAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-up\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n" }]
118
+ args: [{ selector: 'sky-angular-tree-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyI18nModule, SkyIconModule, SkyToolbarModule], template: "<div class=\"sky-angular-tree-toolbar\" role=\"toolbar\">\n <sky-toolbar>\n @if (showSelectButtons) {\n <sky-toolbar-item>\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>\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 }\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 type=\"button\"\n [title]=\"'skyux_angular_tree_expand_all' | skyLibResources\"\n (click)=\"onExpandAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-down\" />\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-default sky-angular-tree-collapse-all-btn\"\n type=\"button\"\n [title]=\"'skyux_angular_tree_collapse_all' | skyLibResources\"\n (click)=\"onCollapseAllClick()\"\n >\n <sky-icon iconName=\"chevron-double-up\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n" }]
120
119
  }], propDecorators: { showSelectButtons: [{
121
120
  type: Input
122
121
  }], clearAllClick: [{
@@ -296,11 +295,11 @@ class SkyAngularTreeWrapperComponent {
296
295
  }
297
296
  }
298
297
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
299
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAngularTreeWrapperComponent, isStandalone: false, 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 @if (showToolbar) {\n <sky-angular-tree-toolbar\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n />\n }\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\" />\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper:not(.sky-theme-modern *){--sky-override-angular-tree-context-menu-margin: 0 10px 0 0;--sky-override-angular-tree-node-active-background-color: #eeeeef;--sky-override-angular-tree-node-border-left-active: 4px solid #00b4f1;--sky-override-angular-tree-node-border-left-selected: 4px solid transparent;--sky-override-angular-tree-node-drop-slot-dragging-background-color: #eeeeef;--sky-override-angular-tree-node-drop-slot-dragging-border: 1px solid #e2e3e4;--sky-override-angular-tree-node-padding-left-base: 0;--sky-override-angular-tree-node-selected-background-color: #f1eef6;--sky-override-angular-tree-node-wrapper-background-color: transparent;--sky-override-angular-tree-node-wrapper-background-color-active: transparent;--sky-override-angular-tree-node-wrapper-background-color-focus: transparent;--sky-override-angular-tree-node-wrapper-background-color-hover: transparent;--sky-override-angular-tree-node-wrapper-border-left: 4px solid transparent;--sky-override-angular-tree-node-wrapper-border-radius: 0;--sky-override-angular-tree-node-wrapper-padding: 4px 5px;--sky-override-tree-children-padding: 30px;--sky-override-angular-tree-node-wrapper-standard-box-shadow-active: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-base: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover: none;--sky-override-angular-tree-node-wrapper-standard-outline-active: auto;--sky-override-angular-tree-node-wrapper-standard-outline-focus: auto;--sky-override-angular-tree-switch-control-margin: 0 8px 0 0;--sky-override-angular-tree-toggle-children-height: 20px;--sky-override-angular-tree-toggle-children-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-padding: 0;--sky-override-angular-tree-toggle-children-placeholder-height: 19px;--sky-override-angular-tree-toggle-children-placeholder-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-placeholder-width: 20px;--sky-override-angular-tree-toggle-children-width: 20px;--sky-override-angular-tree-toggle-color: var(--sky-text-color-deemphasized);--sky-override-angular-tree-wrapper-background-color: transparent}.sky-angular-tree-wrapper{background-color:var(--sky-override-angular-tree-wrapper-background-color, var(--sky-color-background-container-base))}.sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;background-color:var(--sky-override-angular-tree-node-wrapper-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-angular-tree-node-wrapper-padding, calc(var(--sky-comp-tree-node-space-inset-top) - 1px) var(--sky-comp-tree-node-space-inset-right));padding-left:max(var(--sky-angular-tree-node-padding),var(--sky-override-angular-tree-node-padding-left-base, var(--sky-comp-tree-node-space-inset-left)));border-left:var(--sky-override-angular-tree-node-wrapper-border-left, var(--sky-border-width-selected-m) solid transparent);border-radius:var(--sky-override-angular-tree-node-wrapper-border-radius, var(--sky-border-radius-xs) var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-xs));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-base, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-nav-base))}.sky-angular-tree-wrapper ::ng-deep .node-wrapper:focus-visible{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-focus, var(--sky-color-background-nav-focus));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-focus, none)}.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:var(--sky-override-tree-children-padding, var(--sky-comp-tree-child-space-inset-left));overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:var(--sky-override-angular-tree-toggle-color, var(--sky-color-text-deemphasized));margin:var(--sky-override-angular-tree-toggle-children-margin, 0 var(--sky-space-gap-action_group-s) 0 0);height:var(--sky-override-angular-tree-toggle-children-height, \"\");width:var(--sky-override-angular-tree-toggle-children-width, \"\");padding:var(--sky-override-angular-tree-toggle-children-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));line-height:1}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:var(--sky-override-angular-tree-toggle-children-placeholder-height, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom)));width:var(--sky-override-angular-tree-toggle-children-placeholder-width, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-left) + var(--sky-comp-button-borderless-space-inset-right)));margin:var(--sky-override-angular-tree-toggle-children-placeholder-margin, 0 var(--sky-space-inline-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:var(--sky-override-angular-tree-node-selected-background-color, var(--sky-color-background-selected-soft))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected:not(.sky-angular-tree-node-has-checkbox){border-left:var(--sky-override-angular-tree-node-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background:var(--sky-override-angular-tree-node-active-background-color, var(--sky-color-background-selected-soft));border-left:var(--sky-override-angular-tree-node-border-left-active, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:var(--sky-override-angular-tree-switch-control-margin, 0 var(--sky-space-gap-action_group-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:var(--sky-override-angular-tree-context-menu-margin, 0 var(--sky-space-gap-action_group-s) 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:var(--sky-override-angular-tree-node-drop-slot-dragging-background-color, var(--sky-color-background-action-soft));border:var(--sky-override-angular-tree-node-drop-slot-dragging-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base))}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:hover{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover))}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:active{background:var(--sky-override-angular-tree-node-wrapper-background-color-active, var(--sky-color-background-nav-active));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-active, none)}\n"], dependencies: [{ kind: "component", type: SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
298
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAngularTreeWrapperComponent, isStandalone: true, 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 @if (showToolbar) {\n <sky-angular-tree-toolbar\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n />\n }\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\" />\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper:not(.sky-theme-modern *){--sky-override-angular-tree-context-menu-margin: 0 10px 0 0;--sky-override-angular-tree-node-active-background-color: #eeeeef;--sky-override-angular-tree-node-border-left-active: 4px solid #00b4f1;--sky-override-angular-tree-node-border-left-selected: 4px solid transparent;--sky-override-angular-tree-node-drop-slot-dragging-background-color: #eeeeef;--sky-override-angular-tree-node-drop-slot-dragging-border: 1px solid #e2e3e4;--sky-override-angular-tree-node-padding-left-base: 0;--sky-override-angular-tree-node-selected-background-color: #f1eef6;--sky-override-angular-tree-node-wrapper-background-color: transparent;--sky-override-angular-tree-node-wrapper-background-color-active: transparent;--sky-override-angular-tree-node-wrapper-background-color-focus: transparent;--sky-override-angular-tree-node-wrapper-background-color-hover: transparent;--sky-override-angular-tree-node-wrapper-border-left: 4px solid transparent;--sky-override-angular-tree-node-wrapper-border-radius: 0;--sky-override-angular-tree-node-wrapper-padding: 4px 5px;--sky-override-tree-children-padding: 30px;--sky-override-angular-tree-node-wrapper-standard-box-shadow-active: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-base: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover: none;--sky-override-angular-tree-node-wrapper-standard-outline-active: auto;--sky-override-angular-tree-node-wrapper-standard-outline-focus: auto;--sky-override-angular-tree-switch-control-margin: 0 8px 0 0;--sky-override-angular-tree-toggle-children-height: 20px;--sky-override-angular-tree-toggle-children-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-padding: 0;--sky-override-angular-tree-toggle-children-placeholder-height: 19px;--sky-override-angular-tree-toggle-children-placeholder-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-placeholder-width: 20px;--sky-override-angular-tree-toggle-children-width: 20px;--sky-override-angular-tree-toggle-color: var(--sky-text-color-deemphasized);--sky-override-angular-tree-wrapper-background-color: transparent}.sky-angular-tree-wrapper{background-color:var(--sky-override-angular-tree-wrapper-background-color, var(--sky-color-background-container-base))}.sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;background-color:var(--sky-override-angular-tree-node-wrapper-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-angular-tree-node-wrapper-padding, calc(var(--sky-comp-tree-node-space-inset-top) - 1px) var(--sky-comp-tree-node-space-inset-right));padding-left:max(var(--sky-angular-tree-node-padding),var(--sky-override-angular-tree-node-padding-left-base, var(--sky-comp-tree-node-space-inset-left)));border-left:var(--sky-override-angular-tree-node-wrapper-border-left, var(--sky-border-width-selected-m) solid transparent);border-radius:var(--sky-override-angular-tree-node-wrapper-border-radius, var(--sky-border-radius-xs) var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-xs));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-base, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-nav-base))}.sky-angular-tree-wrapper ::ng-deep .node-wrapper:focus-visible{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-focus, var(--sky-color-background-nav-focus));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-focus, none)}.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:var(--sky-override-tree-children-padding, var(--sky-comp-tree-child-space-inset-left));overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:var(--sky-override-angular-tree-toggle-color, var(--sky-color-text-deemphasized));margin:var(--sky-override-angular-tree-toggle-children-margin, 0 var(--sky-space-gap-action_group-s) 0 0);height:var(--sky-override-angular-tree-toggle-children-height, \"\");width:var(--sky-override-angular-tree-toggle-children-width, \"\");padding:var(--sky-override-angular-tree-toggle-children-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));line-height:1}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:var(--sky-override-angular-tree-toggle-children-placeholder-height, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom)));width:var(--sky-override-angular-tree-toggle-children-placeholder-width, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-left) + var(--sky-comp-button-borderless-space-inset-right)));margin:var(--sky-override-angular-tree-toggle-children-placeholder-margin, 0 var(--sky-space-inline-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:var(--sky-override-angular-tree-node-selected-background-color, var(--sky-color-background-selected-soft))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected:not(.sky-angular-tree-node-has-checkbox){border-left:var(--sky-override-angular-tree-node-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background:var(--sky-override-angular-tree-node-active-background-color, var(--sky-color-background-selected-soft));border-left:var(--sky-override-angular-tree-node-border-left-active, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:var(--sky-override-angular-tree-switch-control-margin, 0 var(--sky-space-gap-action_group-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:var(--sky-override-angular-tree-context-menu-margin, 0 var(--sky-space-gap-action_group-s) 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:var(--sky-override-angular-tree-node-drop-slot-dragging-background-color, var(--sky-color-background-action-soft));border:var(--sky-override-angular-tree-node-drop-slot-dragging-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base))}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:hover{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover))}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:active{background:var(--sky-override-angular-tree-node-wrapper-background-color-active, var(--sky-color-background-nav-active));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-active, none)}\n"], dependencies: [{ kind: "component", type: SkyAngularTreeToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
300
299
  }
301
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
302
301
  type: Component,
303
- args: [{ selector: 'sky-angular-tree-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"sky-angular-tree-wrapper\"\n [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n @if (showToolbar) {\n <sky-angular-tree-toolbar\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n />\n }\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\" />\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper:not(.sky-theme-modern *){--sky-override-angular-tree-context-menu-margin: 0 10px 0 0;--sky-override-angular-tree-node-active-background-color: #eeeeef;--sky-override-angular-tree-node-border-left-active: 4px solid #00b4f1;--sky-override-angular-tree-node-border-left-selected: 4px solid transparent;--sky-override-angular-tree-node-drop-slot-dragging-background-color: #eeeeef;--sky-override-angular-tree-node-drop-slot-dragging-border: 1px solid #e2e3e4;--sky-override-angular-tree-node-padding-left-base: 0;--sky-override-angular-tree-node-selected-background-color: #f1eef6;--sky-override-angular-tree-node-wrapper-background-color: transparent;--sky-override-angular-tree-node-wrapper-background-color-active: transparent;--sky-override-angular-tree-node-wrapper-background-color-focus: transparent;--sky-override-angular-tree-node-wrapper-background-color-hover: transparent;--sky-override-angular-tree-node-wrapper-border-left: 4px solid transparent;--sky-override-angular-tree-node-wrapper-border-radius: 0;--sky-override-angular-tree-node-wrapper-padding: 4px 5px;--sky-override-tree-children-padding: 30px;--sky-override-angular-tree-node-wrapper-standard-box-shadow-active: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-base: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover: none;--sky-override-angular-tree-node-wrapper-standard-outline-active: auto;--sky-override-angular-tree-node-wrapper-standard-outline-focus: auto;--sky-override-angular-tree-switch-control-margin: 0 8px 0 0;--sky-override-angular-tree-toggle-children-height: 20px;--sky-override-angular-tree-toggle-children-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-padding: 0;--sky-override-angular-tree-toggle-children-placeholder-height: 19px;--sky-override-angular-tree-toggle-children-placeholder-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-placeholder-width: 20px;--sky-override-angular-tree-toggle-children-width: 20px;--sky-override-angular-tree-toggle-color: var(--sky-text-color-deemphasized);--sky-override-angular-tree-wrapper-background-color: transparent}.sky-angular-tree-wrapper{background-color:var(--sky-override-angular-tree-wrapper-background-color, var(--sky-color-background-container-base))}.sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;background-color:var(--sky-override-angular-tree-node-wrapper-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-angular-tree-node-wrapper-padding, calc(var(--sky-comp-tree-node-space-inset-top) - 1px) var(--sky-comp-tree-node-space-inset-right));padding-left:max(var(--sky-angular-tree-node-padding),var(--sky-override-angular-tree-node-padding-left-base, var(--sky-comp-tree-node-space-inset-left)));border-left:var(--sky-override-angular-tree-node-wrapper-border-left, var(--sky-border-width-selected-m) solid transparent);border-radius:var(--sky-override-angular-tree-node-wrapper-border-radius, var(--sky-border-radius-xs) var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-xs));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-base, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-nav-base))}.sky-angular-tree-wrapper ::ng-deep .node-wrapper:focus-visible{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-focus, var(--sky-color-background-nav-focus));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-focus, none)}.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:var(--sky-override-tree-children-padding, var(--sky-comp-tree-child-space-inset-left));overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:var(--sky-override-angular-tree-toggle-color, var(--sky-color-text-deemphasized));margin:var(--sky-override-angular-tree-toggle-children-margin, 0 var(--sky-space-gap-action_group-s) 0 0);height:var(--sky-override-angular-tree-toggle-children-height, \"\");width:var(--sky-override-angular-tree-toggle-children-width, \"\");padding:var(--sky-override-angular-tree-toggle-children-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));line-height:1}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:var(--sky-override-angular-tree-toggle-children-placeholder-height, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom)));width:var(--sky-override-angular-tree-toggle-children-placeholder-width, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-left) + var(--sky-comp-button-borderless-space-inset-right)));margin:var(--sky-override-angular-tree-toggle-children-placeholder-margin, 0 var(--sky-space-inline-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:var(--sky-override-angular-tree-node-selected-background-color, var(--sky-color-background-selected-soft))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected:not(.sky-angular-tree-node-has-checkbox){border-left:var(--sky-override-angular-tree-node-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background:var(--sky-override-angular-tree-node-active-background-color, var(--sky-color-background-selected-soft));border-left:var(--sky-override-angular-tree-node-border-left-active, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:var(--sky-override-angular-tree-switch-control-margin, 0 var(--sky-space-gap-action_group-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:var(--sky-override-angular-tree-context-menu-margin, 0 var(--sky-space-gap-action_group-s) 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:var(--sky-override-angular-tree-node-drop-slot-dragging-background-color, var(--sky-color-background-action-soft));border:var(--sky-override-angular-tree-node-drop-slot-dragging-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base))}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:hover{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover))}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:active{background:var(--sky-override-angular-tree-node-wrapper-background-color-active, var(--sky-color-background-nav-active));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-active, none)}\n"] }]
302
+ args: [{ selector: 'sky-angular-tree-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyAngularTreeToolbarComponent], template: "<div\n class=\"sky-angular-tree-wrapper\"\n [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n @if (showToolbar) {\n <sky-angular-tree-toolbar\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n />\n }\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\" />\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper:not(.sky-theme-modern *){--sky-override-angular-tree-context-menu-margin: 0 10px 0 0;--sky-override-angular-tree-node-active-background-color: #eeeeef;--sky-override-angular-tree-node-border-left-active: 4px solid #00b4f1;--sky-override-angular-tree-node-border-left-selected: 4px solid transparent;--sky-override-angular-tree-node-drop-slot-dragging-background-color: #eeeeef;--sky-override-angular-tree-node-drop-slot-dragging-border: 1px solid #e2e3e4;--sky-override-angular-tree-node-padding-left-base: 0;--sky-override-angular-tree-node-selected-background-color: #f1eef6;--sky-override-angular-tree-node-wrapper-background-color: transparent;--sky-override-angular-tree-node-wrapper-background-color-active: transparent;--sky-override-angular-tree-node-wrapper-background-color-focus: transparent;--sky-override-angular-tree-node-wrapper-background-color-hover: transparent;--sky-override-angular-tree-node-wrapper-border-left: 4px solid transparent;--sky-override-angular-tree-node-wrapper-border-radius: 0;--sky-override-angular-tree-node-wrapper-padding: 4px 5px;--sky-override-tree-children-padding: 30px;--sky-override-angular-tree-node-wrapper-standard-box-shadow-active: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-base: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus: none;--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover: none;--sky-override-angular-tree-node-wrapper-standard-outline-active: auto;--sky-override-angular-tree-node-wrapper-standard-outline-focus: auto;--sky-override-angular-tree-switch-control-margin: 0 8px 0 0;--sky-override-angular-tree-toggle-children-height: 20px;--sky-override-angular-tree-toggle-children-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-padding: 0;--sky-override-angular-tree-toggle-children-placeholder-height: 19px;--sky-override-angular-tree-toggle-children-placeholder-margin: 0 10px 0 0;--sky-override-angular-tree-toggle-children-placeholder-width: 20px;--sky-override-angular-tree-toggle-children-width: 20px;--sky-override-angular-tree-toggle-color: var(--sky-text-color-deemphasized);--sky-override-angular-tree-wrapper-background-color: transparent}.sky-angular-tree-wrapper{background-color:var(--sky-override-angular-tree-wrapper-background-color, var(--sky-color-background-container-base))}.sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;background-color:var(--sky-override-angular-tree-node-wrapper-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-angular-tree-node-wrapper-padding, calc(var(--sky-comp-tree-node-space-inset-top) - 1px) var(--sky-comp-tree-node-space-inset-right));padding-left:max(var(--sky-angular-tree-node-padding),var(--sky-override-angular-tree-node-padding-left-base, var(--sky-comp-tree-node-space-inset-left)));border-left:var(--sky-override-angular-tree-node-wrapper-border-left, var(--sky-border-width-selected-m) solid transparent);border-radius:var(--sky-override-angular-tree-node-wrapper-border-radius, var(--sky-border-radius-xs) var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-xs));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-base, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-nav-base))}.sky-angular-tree-wrapper ::ng-deep .node-wrapper:focus-visible{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-focus, var(--sky-color-background-nav-focus));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-focus, none)}.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:var(--sky-override-tree-children-padding, var(--sky-comp-tree-child-space-inset-left));overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:var(--sky-override-angular-tree-toggle-color, var(--sky-color-text-deemphasized));margin:var(--sky-override-angular-tree-toggle-children-margin, 0 var(--sky-space-gap-action_group-s) 0 0);height:var(--sky-override-angular-tree-toggle-children-height, \"\");width:var(--sky-override-angular-tree-toggle-children-width, \"\");padding:var(--sky-override-angular-tree-toggle-children-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));line-height:1}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:var(--sky-override-angular-tree-toggle-children-placeholder-height, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom)));width:var(--sky-override-angular-tree-toggle-children-placeholder-width, calc(var(--sky-size-icon-s) + var(--sky-comp-button-borderless-space-inset-left) + var(--sky-comp-button-borderless-space-inset-right)));margin:var(--sky-override-angular-tree-toggle-children-placeholder-margin, 0 var(--sky-space-inline-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:var(--sky-override-angular-tree-node-selected-background-color, var(--sky-color-background-selected-soft))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected:not(.sky-angular-tree-node-has-checkbox){border-left:var(--sky-override-angular-tree-node-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background:var(--sky-override-angular-tree-node-active-background-color, var(--sky-color-background-selected-soft));border-left:var(--sky-override-angular-tree-node-border-left-active, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:var(--sky-override-angular-tree-switch-control-margin, 0 var(--sky-space-gap-action_group-s) 0 0)}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:var(--sky-override-angular-tree-context-menu-margin, 0 var(--sky-space-gap-action_group-s) 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:var(--sky-override-angular-tree-node-drop-slot-dragging-background-color, var(--sky-color-background-action-soft));border:var(--sky-override-angular-tree-node-drop-slot-dragging-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base))}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:hover{background-color:var(--sky-override-angular-tree-node-wrapper-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover))}.sky-angular-tree-wrapper:not(.sky-angular-tree-read-only) ::ng-deep .node-wrapper:active{background:var(--sky-override-angular-tree-node-wrapper-background-color-active, var(--sky-color-background-nav-active));box-shadow:var(--sky-override-angular-tree-node-wrapper-standard-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active));outline:var(--sky-override-angular-tree-node-wrapper-standard-outline-active, none)}\n"] }]
304
303
  }], propDecorators: { readOnly: [{
305
304
  type: Input
306
305
  }], selectLeafNodesOnly: [{
@@ -553,11 +552,18 @@ class SkyAngularTreeNodeComponent {
553
552
  }
554
553
  }
555
554
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
556
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAngularTreeNodeComponent, isStandalone: false, selector: "sky-angular-tree-node", inputs: { index: "index", node: "node", templates: "templates", helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle" }, providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], viewQueries: [{ propertyName: "nodeContentWrapperRef", first: true, predicate: ["nodeContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (node && index !== undefined) {\n <div\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 @if (index === 0) {\n <tree-node-drop-slot [dropIndex]=\"node.index\" [node]=\"node.parent\" />\n }\n\n <!-- #region <tree-node-wrapper> custom template --->\n <div\n #nodeContentWrapper\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-has-checkbox]=\"showCheckbox()\"\n [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n [style.--sky-angular-tree-node-padding]=\"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 >\n <!-- #region <tree-node-expander> custom template --->\n <div class=\"sky-toggle-children-wrapper\">\n @if (node.hasChildren) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-toggle-children\"\n tabindex=\"-1\"\n type=\"button\"\n [attr.aria-label]=\"nodeName\"\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 [iconName]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n />\n </button>\n }\n @if (showTogglePlaceholder()) {\n <span class=\"toggle-children-placeholder\"> </span>\n }\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 @if (showCheckbox()) {\n <sky-checkbox\n [checked]=\"isSelected\"\n [id]=\"node.data.id\"\n [label]=\"nodeName\"\n [indeterminate]=\"isPartiallySelected\"\n (change)=\"node.mouseAction('checkboxClick', $event)\"\n />\n }\n\n <sky-angular-tree-context-menu>\n <ng-content select=\"sky-dropdown\" />\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 /><span class=\"sky-control-help-container\">\n @if (helpKey || helpPopoverContent) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"nodeName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\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 <!-- #endregion <tree-node-wrapper> -->\n\n <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\" />\n\n <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\" />\n </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i3$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i5.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i5.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i5.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i5.TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: i5.TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }] }); }
555
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyAngularTreeNodeComponent, isStandalone: true, selector: "sky-angular-tree-node", inputs: { index: "index", node: "node", templates: "templates", helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle" }, providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], viewQueries: [{ propertyName: "nodeContentWrapperRef", first: true, predicate: ["nodeContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (node && index !== undefined) {\n <div\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 @if (index === 0) {\n <tree-node-drop-slot [dropIndex]=\"node.index\" [node]=\"node.parent\" />\n }\n\n <!-- #region <tree-node-wrapper> custom template --->\n <div\n #nodeContentWrapper\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-has-checkbox]=\"showCheckbox()\"\n [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n [style.--sky-angular-tree-node-padding]=\"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 >\n <!-- #region <tree-node-expander> custom template --->\n <div class=\"sky-toggle-children-wrapper\">\n @if (node.hasChildren) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-toggle-children\"\n tabindex=\"-1\"\n type=\"button\"\n [attr.aria-label]=\"nodeName\"\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 [iconName]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n />\n </button>\n }\n @if (showTogglePlaceholder()) {\n <span class=\"toggle-children-placeholder\"> </span>\n }\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 @if (showCheckbox()) {\n <sky-checkbox\n [checked]=\"isSelected\"\n [id]=\"node.data.id\"\n [label]=\"nodeName\"\n [indeterminate]=\"isPartiallySelected\"\n (change)=\"node.mouseAction('checkboxClick', $event)\"\n />\n }\n\n <sky-angular-tree-context-menu>\n <ng-content select=\"sky-dropdown\" />\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 /><span class=\"sky-control-help-container\">\n @if (helpKey || helpPopoverContent) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"nodeName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\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 <!-- #endregion <tree-node-wrapper> -->\n\n <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\" />\n\n <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\" />\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: TreeModule }, { kind: "component", type: i1$1.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i1$1.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i1$1.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i1$1.TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: i1$1.TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
557
556
  }
558
557
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
559
558
  type: Component,
560
- args: [{ selector: 'sky-angular-tree-node', providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], standalone: false, template: "@if (node && index !== undefined) {\n <div\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 @if (index === 0) {\n <tree-node-drop-slot [dropIndex]=\"node.index\" [node]=\"node.parent\" />\n }\n\n <!-- #region <tree-node-wrapper> custom template --->\n <div\n #nodeContentWrapper\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-has-checkbox]=\"showCheckbox()\"\n [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n [style.--sky-angular-tree-node-padding]=\"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 >\n <!-- #region <tree-node-expander> custom template --->\n <div class=\"sky-toggle-children-wrapper\">\n @if (node.hasChildren) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-toggle-children\"\n tabindex=\"-1\"\n type=\"button\"\n [attr.aria-label]=\"nodeName\"\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 [iconName]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n />\n </button>\n }\n @if (showTogglePlaceholder()) {\n <span class=\"toggle-children-placeholder\"> </span>\n }\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 @if (showCheckbox()) {\n <sky-checkbox\n [checked]=\"isSelected\"\n [id]=\"node.data.id\"\n [label]=\"nodeName\"\n [indeterminate]=\"isPartiallySelected\"\n (change)=\"node.mouseAction('checkboxClick', $event)\"\n />\n }\n\n <sky-angular-tree-context-menu>\n <ng-content select=\"sky-dropdown\" />\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 /><span class=\"sky-control-help-container\">\n @if (helpKey || helpPopoverContent) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"nodeName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\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 <!-- #endregion <tree-node-wrapper> -->\n\n <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\" />\n\n <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\" />\n </div>\n}\n" }]
559
+ args: [{ selector: 'sky-angular-tree-node', providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], imports: [
560
+ TreeModule,
561
+ SkyAngularTreeContextMenuComponent,
562
+ SkyCheckboxModule,
563
+ SkyHelpInlineModule,
564
+ SkyIconModule,
565
+ NgTemplateOutlet,
566
+ ], template: "@if (node && index !== undefined) {\n <div\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 @if (index === 0) {\n <tree-node-drop-slot [dropIndex]=\"node.index\" [node]=\"node.parent\" />\n }\n\n <!-- #region <tree-node-wrapper> custom template --->\n <div\n #nodeContentWrapper\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-has-checkbox]=\"showCheckbox()\"\n [class.sky-angular-tree-node-selected]=\"showSelectedClass()\"\n [style.--sky-angular-tree-node-padding]=\"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 >\n <!-- #region <tree-node-expander> custom template --->\n <div class=\"sky-toggle-children-wrapper\">\n @if (node.hasChildren) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-toggle-children\"\n tabindex=\"-1\"\n type=\"button\"\n [attr.aria-label]=\"nodeName\"\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 [iconName]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n />\n </button>\n }\n @if (showTogglePlaceholder()) {\n <span class=\"toggle-children-placeholder\"> </span>\n }\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 @if (showCheckbox()) {\n <sky-checkbox\n [checked]=\"isSelected\"\n [id]=\"node.data.id\"\n [label]=\"nodeName\"\n [indeterminate]=\"isPartiallySelected\"\n (change)=\"node.mouseAction('checkboxClick', $event)\"\n />\n }\n\n <sky-angular-tree-context-menu>\n <ng-content select=\"sky-dropdown\" />\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 /><span class=\"sky-control-help-container\">\n @if (helpKey || helpPopoverContent) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"nodeName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\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 <!-- #endregion <tree-node-wrapper> -->\n\n <tree-node-children role=\"group\" [node]=\"node\" [templates]=\"templates\" />\n\n <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\" />\n </div>\n}\n" }]
561
567
  }], propDecorators: { index: [{
562
568
  type: Input
563
569
  }], node: [{
@@ -577,43 +583,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
577
583
 
578
584
  class SkyAngularTreeModule {
579
585
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
580
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
586
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, imports: [SkyAngularTreeComponentResourcesModule,
587
+ SkyAngularTreeContextMenuComponent,
588
+ SkyAngularTreeNodeComponent,
589
+ SkyAngularTreeToolbarComponent,
590
+ SkyAngularTreeWrapperComponent], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
591
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, imports: [SkyAngularTreeComponentResourcesModule,
581
592
  SkyAngularTreeNodeComponent,
582
- SkyAngularTreeWrapperComponent,
583
- SkyTreeViewToolbarComponent], imports: [CommonModule,
584
- SkyAngularTreeComponentResourcesModule,
585
- SkyCheckboxModule,
586
- SkyHelpInlineModule,
587
- SkyIconModule,
588
- SkyToolbarModule,
589
- TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
590
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
591
- SkyAngularTreeComponentResourcesModule,
592
- SkyCheckboxModule,
593
- SkyHelpInlineModule,
594
- SkyIconModule,
595
- SkyToolbarModule,
596
- TreeModule] }); }
593
+ SkyAngularTreeToolbarComponent,
594
+ SkyAngularTreeWrapperComponent] }); }
597
595
  }
598
596
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
599
597
  type: NgModule,
600
598
  args: [{
601
- declarations: [
599
+ imports: [
600
+ SkyAngularTreeComponentResourcesModule,
602
601
  SkyAngularTreeContextMenuComponent,
603
602
  SkyAngularTreeNodeComponent,
603
+ SkyAngularTreeToolbarComponent,
604
604
  SkyAngularTreeWrapperComponent,
605
- SkyTreeViewToolbarComponent,
606
- ],
607
- imports: [
608
- CommonModule,
609
- SkyAngularTreeComponentResourcesModule,
610
- SkyCheckboxModule,
611
- SkyHelpInlineModule,
612
- SkyIconModule,
613
- SkyToolbarModule,
614
- TreeModule,
615
605
  ],
616
- providers: [SkyCoreAdapterService],
617
606
  exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent],
618
607
  }]
619
608
  }] });