@skyux/angular-tree-component 8.0.0-beta.4 → 8.0.1
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.
- package/documentation.json +419 -471
- package/esm2020/lib/modules/angular-tree/angular-tree-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/angular-tree/angular-tree-context-menu.component.mjs +3 -3
- package/esm2020/lib/modules/angular-tree/angular-tree-node.component.mjs +3 -3
- package/esm2020/lib/modules/angular-tree/angular-tree-toolbar.component.mjs +3 -3
- package/esm2020/lib/modules/angular-tree/angular-tree-wrapper.component.mjs +3 -3
- package/esm2020/lib/modules/angular-tree/angular-tree.module.mjs +4 -4
- package/esm2020/lib/modules/shared/sky-angular-tree-component-resources.module.mjs +4 -4
- package/fesm2015/skyux-angular-tree-component.mjs +23 -23
- package/fesm2020/skyux-angular-tree-component.mjs +23 -23
- package/package.json +8 -8
|
@@ -41,16 +41,16 @@ class SkyAngularTreeComponentResourcesProvider {
|
|
|
41
41
|
*/
|
|
42
42
|
class SkyAngularTreeComponentResourcesModule {
|
|
43
43
|
}
|
|
44
|
-
SkyAngularTreeComponentResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
45
|
-
SkyAngularTreeComponentResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
46
|
-
SkyAngularTreeComponentResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
44
|
+
SkyAngularTreeComponentResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
45
|
+
SkyAngularTreeComponentResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] });
|
|
46
|
+
SkyAngularTreeComponentResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
|
|
47
47
|
{
|
|
48
48
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
49
49
|
useClass: SkyAngularTreeComponentResourcesProvider,
|
|
50
50
|
multi: true,
|
|
51
51
|
},
|
|
52
52
|
], imports: [SkyI18nModule] });
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
|
|
54
54
|
type: NgModule,
|
|
55
55
|
args: [{
|
|
56
56
|
exports: [SkyI18nModule],
|
|
@@ -69,9 +69,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
69
69
|
*/
|
|
70
70
|
class SkyAngularTreeContextMenuComponent {
|
|
71
71
|
}
|
|
72
|
-
SkyAngularTreeContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
73
|
-
SkyAngularTreeContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
72
|
+
SkyAngularTreeContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
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 });
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
76
|
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" }]
|
|
77
77
|
}] });
|
|
@@ -97,9 +97,9 @@ class SkyAngularTreeAdapterService {
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
_SkyAngularTreeAdapterService_coreAdapterService = new WeakMap();
|
|
100
|
-
SkyAngularTreeAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
101
|
-
SkyAngularTreeAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
100
|
+
SkyAngularTreeAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
101
|
+
SkyAngularTreeAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeAdapterService });
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
|
|
103
103
|
type: Injectable
|
|
104
104
|
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
|
|
105
105
|
|
|
@@ -126,9 +126,9 @@ class SkyTreeViewToolbarComponent {
|
|
|
126
126
|
this.selectAllClick.emit();
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
|
-
SkyTreeViewToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
130
|
-
SkyTreeViewToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
129
|
+
SkyTreeViewToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
130
|
+
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 });
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
133
|
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" }]
|
|
134
134
|
}], propDecorators: { showSelectButtons: [{
|
|
@@ -308,9 +308,9 @@ _SkyAngularTreeWrapperComponent_instances = new WeakSet(), _SkyAngularTreeWrappe
|
|
|
308
308
|
TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
|
|
309
309
|
}
|
|
310
310
|
};
|
|
311
|
-
SkyAngularTreeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
312
|
-
SkyAngularTreeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
311
|
+
SkyAngularTreeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
312
|
+
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}.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 });
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
314
314
|
type: Component,
|
|
315
315
|
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}.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"] }]
|
|
316
316
|
}], propDecorators: { readOnly: [{
|
|
@@ -553,9 +553,9 @@ _SkyAngularTreeNodeComponent_focusableChildren = new WeakMap(), _SkyAngularTreeN
|
|
|
553
553
|
return false;
|
|
554
554
|
}
|
|
555
555
|
};
|
|
556
|
-
SkyAngularTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
557
|
-
SkyAngularTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
556
|
+
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 });
|
|
557
|
+
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" }] });
|
|
558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
|
|
559
559
|
type: Component,
|
|
560
560
|
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" }]
|
|
561
561
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyAngularTreeAdapterService }, { type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
@@ -573,8 +573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
573
573
|
|
|
574
574
|
class SkyAngularTreeModule {
|
|
575
575
|
}
|
|
576
|
-
SkyAngularTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
577
|
-
SkyAngularTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
576
|
+
SkyAngularTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
577
|
+
SkyAngularTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
|
|
578
578
|
SkyAngularTreeNodeComponent,
|
|
579
579
|
SkyAngularTreeWrapperComponent,
|
|
580
580
|
SkyTreeViewToolbarComponent], imports: [CommonModule,
|
|
@@ -583,13 +583,13 @@ SkyAngularTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
|
|
|
583
583
|
SkyIconModule,
|
|
584
584
|
SkyToolbarModule,
|
|
585
585
|
TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] });
|
|
586
|
-
SkyAngularTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
586
|
+
SkyAngularTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
|
|
587
587
|
SkyAngularTreeComponentResourcesModule,
|
|
588
588
|
SkyCheckboxModule,
|
|
589
589
|
SkyIconModule,
|
|
590
590
|
SkyToolbarModule,
|
|
591
591
|
TreeModule] });
|
|
592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
|
|
593
593
|
type: NgModule,
|
|
594
594
|
args: [{
|
|
595
595
|
declarations: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/angular-tree-component",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@angular/common": "^15.2.
|
|
36
|
-
"@angular/core": "^15.2.
|
|
35
|
+
"@angular/common": "^15.2.9",
|
|
36
|
+
"@angular/core": "^15.2.9",
|
|
37
37
|
"@circlon/angular-tree-component": "^11.0.4",
|
|
38
|
-
"@skyux/core": "8.0.
|
|
39
|
-
"@skyux/forms": "8.0.
|
|
40
|
-
"@skyux/i18n": "8.0.
|
|
41
|
-
"@skyux/indicators": "8.0.
|
|
42
|
-
"@skyux/layout": "8.0.
|
|
38
|
+
"@skyux/core": "8.0.1",
|
|
39
|
+
"@skyux/forms": "8.0.1",
|
|
40
|
+
"@skyux/i18n": "8.0.1",
|
|
41
|
+
"@skyux/indicators": "8.0.1",
|
|
42
|
+
"@skyux/layout": "8.0.1"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"tslib": "^2.5.0"
|