@skyux/angular-tree-component 11.0.0-alpha.0 → 11.0.0-alpha.10
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 +101 -102
- package/esm2022/lib/modules/angular-tree/angular-tree-adapter.service.mjs +3 -3
- package/esm2022/lib/modules/angular-tree/angular-tree-context-menu.component.mjs +3 -3
- package/esm2022/lib/modules/angular-tree/angular-tree-node.component.mjs +3 -3
- package/esm2022/lib/modules/angular-tree/angular-tree-toolbar.component.mjs +3 -3
- package/esm2022/lib/modules/angular-tree/angular-tree-wrapper.component.mjs +3 -3
- package/esm2022/lib/modules/angular-tree/angular-tree.module.mjs +4 -4
- package/esm2022/lib/modules/shared/sky-angular-tree-component-resources.module.mjs +4 -4
- package/fesm2022/skyux-angular-tree-component.mjs +23 -23
- package/fesm2022/skyux-angular-tree-component.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -19,10 +19,10 @@ export class SkyAngularTreeAdapterService {
|
|
|
19
19
|
focusableEls[index].tabIndex = tabIndex;
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
23
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
23
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
|
|
26
26
|
type: Injectable
|
|
27
27
|
}], ctorParameters: () => [{ type: i1.SkyCoreAdapterService }] });
|
|
28
28
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10cmVlLWFkYXB0ZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9hbmd1bGFyLXRyZWUtY29tcG9uZW50L3NyYy9saWIvbW9kdWxlcy9hbmd1bGFyLXRyZWUvYW5ndWxhci10cmVlLWFkYXB0ZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFHM0M7O0dBRUc7QUFFSCxNQUFNLE9BQU8sNEJBQTRCO0lBQ3ZDLG1CQUFtQixDQUF3QjtJQUUzQyxZQUFZLGtCQUF5QztRQUNuRCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsa0JBQWtCLENBQUM7SUFDaEQsQ0FBQztJQUVNLG9CQUFvQixDQUFDLE9BQW9CO1FBQzlDLE9BQU8sSUFBSSxDQUFDLG1CQUFtQixDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFTSx5QkFBeUIsQ0FDOUIsT0FBb0IsRUFDcEIsUUFBZ0I7UUFFaEIsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzVFLElBQUksS0FBSyxHQUFHLFlBQVksQ0FBQyxNQUFNLENBQUM7UUFDaEMsT0FBTyxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQ2YsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7UUFDMUMsQ0FBQztJQUNILENBQUM7OEdBcEJVLDRCQUE0QjtrSEFBNUIsNEJBQTRCOzsyRkFBNUIsNEJBQTRCO2tCQUR4QyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5Q29yZUFkYXB0ZXJTZXJ2aWNlIH0gZnJvbSAnQHNreXV4L2NvcmUnO1xuXG4vKipcbiAqIEBpbnRlcm5hbFxuICovXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgU2t5QW5ndWxhclRyZWVBZGFwdGVyU2VydmljZSB7XG4gICNjb3JlQWRhcHRlclNlcnZpY2U6IFNreUNvcmVBZGFwdGVyU2VydmljZTtcblxuICBjb25zdHJ1Y3Rvcihjb3JlQWRhcHRlclNlcnZpY2U6IFNreUNvcmVBZGFwdGVyU2VydmljZSkge1xuICAgIHRoaXMuI2NvcmVBZGFwdGVyU2VydmljZSA9IGNvcmVBZGFwdGVyU2VydmljZTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRGb2N1c2FibGVDaGlsZHJlbihlbGVtZW50OiBIVE1MRWxlbWVudCk6IEhUTUxFbGVtZW50W10ge1xuICAgIHJldHVybiB0aGlzLiNjb3JlQWRhcHRlclNlcnZpY2UuZ2V0Rm9jdXNhYmxlQ2hpbGRyZW4oZWxlbWVudCk7XG4gIH1cblxuICBwdWJsaWMgc2V0VGFiSW5kZXhPZkZvY3VzYWJsZUVscyhcbiAgICBlbGVtZW50OiBIVE1MRWxlbWVudCxcbiAgICB0YWJJbmRleDogbnVtYmVyLFxuICApOiB2b2lkIHtcbiAgICBjb25zdCBmb2N1c2FibGVFbHMgPSB0aGlzLiNjb3JlQWRhcHRlclNlcnZpY2UuZ2V0Rm9jdXNhYmxlQ2hpbGRyZW4oZWxlbWVudCk7XG4gICAgbGV0IGluZGV4ID0gZm9jdXNhYmxlRWxzLmxlbmd0aDtcbiAgICB3aGlsZSAoaW5kZXgtLSkge1xuICAgICAgZm9jdXNhYmxlRWxzW2luZGV4XS50YWJJbmRleCA9IHRhYkluZGV4O1xuICAgIH1cbiAgfVxufVxuIl19
|
|
@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
* @internal
|
|
5
5
|
*/
|
|
6
6
|
export class SkyAngularTreeContextMenuComponent {
|
|
7
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
8
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
7
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyAngularTreeContextMenuComponent, 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 }); }
|
|
9
9
|
}
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
10
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
|
|
11
11
|
type: Component,
|
|
12
12
|
args: [{ selector: 'sky-angular-tree-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n" }]
|
|
13
13
|
}] });
|
|
@@ -251,10 +251,10 @@ export class SkyAngularTreeNodeComponent {
|
|
|
251
251
|
return false;
|
|
252
252
|
}
|
|
253
253
|
}
|
|
254
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
254
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAngularTreeAdapterService }, { token: i2.SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
255
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: SkyAngularTreeNodeComponent, 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: "<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]=\"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 [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n size=\"sm\"\n />\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]=\"nodeName\"\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\" />\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 @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 </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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i7.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i7.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i7.TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: i7.TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: i8.SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }] }); }
|
|
256
256
|
}
|
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
|
|
258
258
|
type: Component,
|
|
259
259
|
args: [{ selector: 'sky-angular-tree-node', providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], 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]=\"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 [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n size=\"sm\"\n />\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]=\"nodeName\"\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\" />\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 @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 </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" }]
|
|
260
260
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SkyAngularTreeAdapterService }, { type: i2.SkyAngularTreeWrapperComponent, decorators: [{
|
|
@@ -26,10 +26,10 @@ export class SkyTreeViewToolbarComponent {
|
|
|
26
26
|
onSelectAllClick() {
|
|
27
27
|
this.selectAllClick.emit();
|
|
28
28
|
}
|
|
29
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
29
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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\" />\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\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { 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 }); }
|
|
31
31
|
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
34
|
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\" />\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\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n" }]
|
|
35
35
|
}], propDecorators: { showSelectButtons: [{
|
|
@@ -169,10 +169,10 @@ export class SkyAngularTreeWrapperComponent {
|
|
|
169
169
|
TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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\" />\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;-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;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
174
174
|
}
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
176
176
|
type: Component,
|
|
177
177
|
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\" />\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;-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;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"] }]
|
|
178
178
|
}], propDecorators: { readOnly: [{
|
|
@@ -13,8 +13,8 @@ import { SkyTreeViewToolbarComponent } from './angular-tree-toolbar.component';
|
|
|
13
13
|
import { SkyAngularTreeWrapperComponent } from './angular-tree-wrapper.component';
|
|
14
14
|
import * as i0 from "@angular/core";
|
|
15
15
|
export class SkyAngularTreeModule {
|
|
16
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
17
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
17
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
|
|
18
18
|
SkyAngularTreeNodeComponent,
|
|
19
19
|
SkyAngularTreeWrapperComponent,
|
|
20
20
|
SkyTreeViewToolbarComponent], imports: [CommonModule,
|
|
@@ -24,7 +24,7 @@ export class SkyAngularTreeModule {
|
|
|
24
24
|
SkyIconModule,
|
|
25
25
|
SkyToolbarModule,
|
|
26
26
|
TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
|
|
27
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
27
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
|
|
28
28
|
SkyAngularTreeComponentResourcesModule,
|
|
29
29
|
SkyCheckboxModule,
|
|
30
30
|
SkyHelpInlineModule,
|
|
@@ -32,7 +32,7 @@ export class SkyAngularTreeModule {
|
|
|
32
32
|
SkyToolbarModule,
|
|
33
33
|
TreeModule] }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
|
|
36
36
|
type: NgModule,
|
|
37
37
|
args: [{
|
|
38
38
|
declarations: [
|
|
@@ -27,9 +27,9 @@ export class SkyAngularTreeComponentResourcesProvider {
|
|
|
27
27
|
* Import into any component library module that needs to use resource strings.
|
|
28
28
|
*/
|
|
29
29
|
export class SkyAngularTreeComponentResourcesModule {
|
|
30
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
31
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
32
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
30
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
31
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] }); }
|
|
32
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
|
|
33
33
|
{
|
|
34
34
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
35
35
|
useClass: SkyAngularTreeComponentResourcesProvider,
|
|
@@ -37,7 +37,7 @@ export class SkyAngularTreeComponentResourcesModule {
|
|
|
37
37
|
},
|
|
38
38
|
], imports: [SkyI18nModule] }); }
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
|
|
41
41
|
type: NgModule,
|
|
42
42
|
args: [{
|
|
43
43
|
exports: [SkyI18nModule],
|
|
@@ -43,9 +43,9 @@ class SkyAngularTreeComponentResourcesProvider {
|
|
|
43
43
|
* Import into any component library module that needs to use resource strings.
|
|
44
44
|
*/
|
|
45
45
|
class SkyAngularTreeComponentResourcesModule {
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
47
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
48
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
47
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] }); }
|
|
48
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
|
|
49
49
|
{
|
|
50
50
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
51
51
|
useClass: SkyAngularTreeComponentResourcesProvider,
|
|
@@ -53,7 +53,7 @@ class SkyAngularTreeComponentResourcesModule {
|
|
|
53
53
|
},
|
|
54
54
|
], imports: [SkyI18nModule] }); }
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
|
|
57
57
|
type: NgModule,
|
|
58
58
|
args: [{
|
|
59
59
|
exports: [SkyI18nModule],
|
|
@@ -71,10 +71,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
71
71
|
* @internal
|
|
72
72
|
*/
|
|
73
73
|
class SkyAngularTreeContextMenuComponent {
|
|
74
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
75
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
74
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
75
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyAngularTreeContextMenuComponent, 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 }); }
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
79
|
args: [{ selector: 'sky-angular-tree-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-angular-tree-context-menu\">\n <ng-content />\n</div>\n" }]
|
|
80
80
|
}] });
|
|
@@ -97,10 +97,10 @@ class SkyAngularTreeAdapterService {
|
|
|
97
97
|
focusableEls[index].tabIndex = tabIndex;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
101
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
101
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService }); }
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
|
|
104
104
|
type: Injectable
|
|
105
105
|
}], ctorParameters: () => [{ type: i1.SkyCoreAdapterService }] });
|
|
106
106
|
|
|
@@ -126,10 +126,10 @@ class SkyTreeViewToolbarComponent {
|
|
|
126
126
|
onSelectAllClick() {
|
|
127
127
|
this.selectAllClick.emit();
|
|
128
128
|
}
|
|
129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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\" />\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\" />\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.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { 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
131
|
}
|
|
132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
|
|
133
133
|
type: Component,
|
|
134
134
|
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\" />\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\" />\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar>\n</div>\n" }]
|
|
135
135
|
}], propDecorators: { showSelectButtons: [{
|
|
@@ -310,10 +310,10 @@ class SkyAngularTreeWrapperComponent {
|
|
|
310
310
|
TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
|
|
311
311
|
}
|
|
312
312
|
}
|
|
313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
313
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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\" />\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;-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;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
315
315
|
}
|
|
316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
317
317
|
type: Component,
|
|
318
318
|
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\" />\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;-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;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"] }]
|
|
319
319
|
}], propDecorators: { readOnly: [{
|
|
@@ -570,10 +570,10 @@ class SkyAngularTreeNodeComponent {
|
|
|
570
570
|
return false;
|
|
571
571
|
}
|
|
572
572
|
}
|
|
573
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyAngularTreeAdapterService }, { token: SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: SkyAngularTreeNodeComponent, 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: "<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]=\"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 [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n size=\"sm\"\n />\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]=\"nodeName\"\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\" />\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 @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 </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", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i7.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i7.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i7.TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: i7.TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }] }); }
|
|
575
575
|
}
|
|
576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
|
|
577
577
|
type: Component,
|
|
578
578
|
args: [{ selector: 'sky-angular-tree-node', providers: [SkyAngularTreeAdapterService, SkyContentInfoProvider], 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]=\"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 [icon]=\"node.isExpanded ? 'chevron-down' : 'chevron-right'\"\n size=\"sm\"\n />\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]=\"nodeName\"\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\" />\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 @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 </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" }]
|
|
579
579
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyAngularTreeAdapterService }, { type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
@@ -596,8 +596,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
596
596
|
}] } });
|
|
597
597
|
|
|
598
598
|
class SkyAngularTreeModule {
|
|
599
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
600
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
600
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
|
|
601
601
|
SkyAngularTreeNodeComponent,
|
|
602
602
|
SkyAngularTreeWrapperComponent,
|
|
603
603
|
SkyTreeViewToolbarComponent], imports: [CommonModule,
|
|
@@ -607,7 +607,7 @@ class SkyAngularTreeModule {
|
|
|
607
607
|
SkyIconModule,
|
|
608
608
|
SkyToolbarModule,
|
|
609
609
|
TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
|
|
610
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
610
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
|
|
611
611
|
SkyAngularTreeComponentResourcesModule,
|
|
612
612
|
SkyCheckboxModule,
|
|
613
613
|
SkyHelpInlineModule,
|
|
@@ -615,7 +615,7 @@ class SkyAngularTreeModule {
|
|
|
615
615
|
SkyToolbarModule,
|
|
616
616
|
TreeModule] }); }
|
|
617
617
|
}
|
|
618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
|
|
619
619
|
type: NgModule,
|
|
620
620
|
args: [{
|
|
621
621
|
declarations: [
|