@skyux/angular-tree-component 9.0.0-alpha.0 → 9.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 +1325 -633
- package/esm2022/index.mjs +2 -2
- 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 +8 -6
- package/fesm2022/skyux-angular-tree-component.mjs +26 -24
- package/fesm2022/skyux-angular-tree-component.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +9 -9
package/esm2022/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { SkyAngularTreeModule } from './lib/modules/angular-tree/angular-tree.module';
|
|
2
2
|
// Components and directives must be exported to support Angular's "partial" Ivy compiler.
|
|
3
3
|
// Obscure names are used to indicate types are not part of the public API.
|
|
4
4
|
export { SkyAngularTreeWrapperComponent as λ1 } from './lib/modules/angular-tree/angular-tree-wrapper.component';
|
|
5
5
|
export { SkyAngularTreeNodeComponent as λ2 } from './lib/modules/angular-tree/angular-tree-node.component';
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvYW5ndWxhci10cmVlLWNvbXBvbmVudC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFFdEYsMEZBQTBGO0FBQzFGLDJFQUEyRTtBQUMzRSxPQUFPLEVBQUUsOEJBQThCLElBQUksRUFBRSxFQUFFLE1BQU0sMkRBQTJELENBQUM7QUFDakgsT0FBTyxFQUFFLDJCQUEyQixJQUFJLEVBQUUsRUFBRSxNQUFNLHdEQUF3RCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgU2t5QW5ndWxhclRyZWVNb2R1bGUgfSBmcm9tICcuL2xpYi9tb2R1bGVzL2FuZ3VsYXItdHJlZS9hbmd1bGFyLXRyZWUubW9kdWxlJztcblxuLy8gQ29tcG9uZW50cyBhbmQgZGlyZWN0aXZlcyBtdXN0IGJlIGV4cG9ydGVkIHRvIHN1cHBvcnQgQW5ndWxhcidzIFwicGFydGlhbFwiIEl2eSBjb21waWxlci5cbi8vIE9ic2N1cmUgbmFtZXMgYXJlIHVzZWQgdG8gaW5kaWNhdGUgdHlwZXMgYXJlIG5vdCBwYXJ0IG9mIHRoZSBwdWJsaWMgQVBJLlxuZXhwb3J0IHsgU2t5QW5ndWxhclRyZWVXcmFwcGVyQ29tcG9uZW50IGFzIM67MSB9IGZyb20gJy4vbGliL21vZHVsZXMvYW5ndWxhci10cmVlL2FuZ3VsYXItdHJlZS13cmFwcGVyLmNvbXBvbmVudCc7XG5leHBvcnQgeyBTa3lBbmd1bGFyVHJlZU5vZGVDb21wb25lbnQgYXMgzrsyIH0gZnJvbSAnLi9saWIvbW9kdWxlcy9hbmd1bGFyLXRyZWUvYW5ndWxhci10cmVlLW5vZGUuY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -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: "16.1
|
|
23
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
23
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
|
|
26
26
|
type: Injectable
|
|
27
27
|
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
|
|
28
28
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci10cmVlLWFkYXB0ZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9hbmd1bGFyLXRyZWUtY29tcG9uZW50L3NyYy9saWIvbW9kdWxlcy9hbmd1bGFyLXRyZWUvYW5ndWxhci10cmVlLWFkYXB0ZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFHM0M7O0dBRUc7QUFFSCxNQUFNLE9BQU8sNEJBQTRCO0lBQ3ZDLG1CQUFtQixDQUF3QjtJQUUzQyxZQUFZLGtCQUF5QztRQUNuRCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsa0JBQWtCLENBQUM7SUFDaEQsQ0FBQztJQUVNLG9CQUFvQixDQUFDLE9BQW9CO1FBQzlDLE9BQU8sSUFBSSxDQUFDLG1CQUFtQixDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFTSx5QkFBeUIsQ0FDOUIsT0FBb0IsRUFDcEIsUUFBZ0I7UUFFaEIsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzVFLElBQUksS0FBSyxHQUFHLFlBQVksQ0FBQyxNQUFNLENBQUM7UUFDaEMsT0FBTyxLQUFLLEVBQUUsRUFBRTtZQUNkLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1NBQ3pDO0lBQ0gsQ0FBQzs4R0FwQlUsNEJBQTRCO2tIQUE1Qiw0QkFBNEI7OzJGQUE1Qiw0QkFBNEI7a0JBRHhDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTa3lDb3JlQWRhcHRlclNlcnZpY2UgfSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbi8qKlxuICogQGludGVybmFsXG4gKi9cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBTa3lBbmd1bGFyVHJlZUFkYXB0ZXJTZXJ2aWNlIHtcbiAgI2NvcmVBZGFwdGVyU2VydmljZTogU2t5Q29yZUFkYXB0ZXJTZXJ2aWNlO1xuXG4gIGNvbnN0cnVjdG9yKGNvcmVBZGFwdGVyU2VydmljZTogU2t5Q29yZUFkYXB0ZXJTZXJ2aWNlKSB7XG4gICAgdGhpcy4jY29yZUFkYXB0ZXJTZXJ2aWNlID0gY29yZUFkYXB0ZXJTZXJ2aWNlO1xuICB9XG5cbiAgcHVibGljIGdldEZvY3VzYWJsZUNoaWxkcmVuKGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogSFRNTEVsZW1lbnRbXSB7XG4gICAgcmV0dXJuIHRoaXMuI2NvcmVBZGFwdGVyU2VydmljZS5nZXRGb2N1c2FibGVDaGlsZHJlbihlbGVtZW50KTtcbiAgfVxuXG4gIHB1YmxpYyBzZXRUYWJJbmRleE9mRm9jdXNhYmxlRWxzKFxuICAgIGVsZW1lbnQ6IEhUTUxFbGVtZW50LFxuICAgIHRhYkluZGV4OiBudW1iZXJcbiAgKTogdm9pZCB7XG4gICAgY29uc3QgZm9jdXNhYmxlRWxzID0gdGhpcy4jY29yZUFkYXB0ZXJTZXJ2aWNlLmdldEZvY3VzYWJsZUNoaWxkcmVuKGVsZW1lbnQpO1xuICAgIGxldCBpbmRleCA9IGZvY3VzYWJsZUVscy5sZW5ndGg7XG4gICAgd2hpbGUgKGluZGV4LS0pIHtcbiAgICAgIGZvY3VzYWJsZUVsc1tpbmRleF0udGFiSW5kZXggPSB0YWJJbmRleDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
|
@@ -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: "16.1
|
|
8
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
7
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 }); }
|
|
9
9
|
}
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
10
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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></ng-content>\n</div>\n" }]
|
|
13
13
|
}] });
|
|
@@ -233,10 +233,10 @@ export class SkyAngularTreeNodeComponent {
|
|
|
233
233
|
return false;
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyAngularTreeAdapterService }, { token: i2.SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: 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", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ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: i7.SkyAngularTreeContextMenuComponent, selector: "sky-angular-tree-context-menu" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
238
238
|
}
|
|
239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
|
|
240
240
|
type: Component,
|
|
241
241
|
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" }]
|
|
242
242
|
}], ctorParameters: function () { return [{ 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: "16.1
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
29
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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.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 }); }
|
|
31
31
|
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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\"> </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" }]
|
|
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: "16.1
|
|
173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyAngularTreeWrapperComponent, selector: "sky-angular-tree-wrapper", inputs: { readOnly: "readOnly", selectLeafNodesOnly: "selectLeafNodesOnly", selectSingle: "selectSingle", showToolbar: "showToolbar" }, queries: [{ propertyName: "treeComponent", first: true, predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-angular-tree-wrapper\"\n [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n <sky-angular-tree-toolbar\n *ngIf=\"showToolbar\"\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n >\n </sky-angular-tree-toolbar>\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\"></ng-content>\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1.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: "16.1
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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\"></ng-content>\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"] }]
|
|
178
178
|
}], propDecorators: { readOnly: [{
|
|
@@ -12,8 +12,8 @@ import { SkyTreeViewToolbarComponent } from './angular-tree-toolbar.component';
|
|
|
12
12
|
import { SkyAngularTreeWrapperComponent } from './angular-tree-wrapper.component';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
export class SkyAngularTreeModule {
|
|
15
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
16
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
15
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
16
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
|
|
17
17
|
SkyAngularTreeNodeComponent,
|
|
18
18
|
SkyAngularTreeWrapperComponent,
|
|
19
19
|
SkyTreeViewToolbarComponent], imports: [CommonModule,
|
|
@@ -22,14 +22,14 @@ export class SkyAngularTreeModule {
|
|
|
22
22
|
SkyIconModule,
|
|
23
23
|
SkyToolbarModule,
|
|
24
24
|
TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
|
|
25
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
25
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
|
|
26
26
|
SkyAngularTreeComponentResourcesModule,
|
|
27
27
|
SkyCheckboxModule,
|
|
28
28
|
SkyIconModule,
|
|
29
29
|
SkyToolbarModule,
|
|
30
30
|
TreeModule] }); }
|
|
31
31
|
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
|
|
33
33
|
type: NgModule,
|
|
34
34
|
args: [{
|
|
35
35
|
declarations: [
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* istanbul ignore file */
|
|
1
2
|
/**
|
|
2
3
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
3
4
|
* The contents of this file were automatically generated by
|
|
@@ -5,7 +6,7 @@
|
|
|
5
6
|
* To update this file, simply rerun the command.
|
|
6
7
|
*/
|
|
7
8
|
import { NgModule } from '@angular/core';
|
|
8
|
-
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
|
+
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, SkyLibResourcesService, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
const RESOURCES = {
|
|
11
12
|
'EN-US': {
|
|
@@ -16,6 +17,7 @@ const RESOURCES = {
|
|
|
16
17
|
skyux_angular_tree_select_all: { message: 'Select all' },
|
|
17
18
|
},
|
|
18
19
|
};
|
|
20
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
19
21
|
export class SkyAngularTreeComponentResourcesProvider {
|
|
20
22
|
getString(localeInfo, name) {
|
|
21
23
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -25,9 +27,9 @@ export class SkyAngularTreeComponentResourcesProvider {
|
|
|
25
27
|
* Import into any component library module that needs to use resource strings.
|
|
26
28
|
*/
|
|
27
29
|
export class SkyAngularTreeComponentResourcesModule {
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
29
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
30
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
30
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
31
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] }); }
|
|
32
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
|
|
31
33
|
{
|
|
32
34
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
33
35
|
useClass: SkyAngularTreeComponentResourcesProvider,
|
|
@@ -35,7 +37,7 @@ export class SkyAngularTreeComponentResourcesModule {
|
|
|
35
37
|
},
|
|
36
38
|
], imports: [SkyI18nModule] }); }
|
|
37
39
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
|
|
39
41
|
type: NgModule,
|
|
40
42
|
args: [{
|
|
41
43
|
exports: [SkyI18nModule],
|
|
@@ -48,4 +50,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
48
50
|
],
|
|
49
51
|
}]
|
|
50
52
|
}] });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5LWFuZ3VsYXItdHJlZS1jb21wb25lbnQtcmVzb3VyY2VzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9hbmd1bGFyLXRyZWUtY29tcG9uZW50L3NyYy9saWIvbW9kdWxlcy9zaGFyZWQvc2t5LWFuZ3VsYXItdHJlZS1jb21wb25lbnQtcmVzb3VyY2VzLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwwQkFBMEI7QUFFMUI7Ozs7O0dBS0c7QUFDSCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFDTCwyQkFBMkIsRUFFM0IsYUFBYSxFQUdiLHNCQUFzQixFQUN0QixxQkFBcUIsR0FDdEIsTUFBTSxhQUFhLENBQUM7O0FBRXJCLE1BQU0sU0FBUyxHQUEwQztJQUN2RCxPQUFPLEVBQUU7UUFDUCw0QkFBNEIsRUFBRSxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUU7UUFDdEQsa0NBQWtDLEVBQUUsRUFBRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUU7UUFDbEUsK0JBQStCLEVBQUUsRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFO1FBQ3hELDZCQUE2QixFQUFFLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRTtRQUNwRCw2QkFBNkIsRUFBRSxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUU7S0FDekQ7Q0FDRixDQUFDO0FBRUYsc0JBQXNCLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0FBRS9DLE1BQU0sT0FBTyx3Q0FBd0M7SUFHNUMsU0FBUyxDQUNkLFVBQTRCLEVBQzVCLElBQVk7UUFFWixPQUFPLHFCQUFxQixDQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ25FLENBQUM7Q0FDRjtBQUVEOztHQUVHO0FBV0gsTUFBTSxPQUFPLHNDQUFzQzs4R0FBdEMsc0NBQXNDOytHQUF0QyxzQ0FBc0MsWUFUdkMsYUFBYTsrR0FTWixzQ0FBc0MsYUFSdEM7WUFDVDtnQkFDRSxPQUFPLEVBQUUsMkJBQTJCO2dCQUNwQyxRQUFRLEVBQUUsd0NBQXdDO2dCQUNsRCxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsWUFQUyxhQUFhOzsyRkFTWixzQ0FBc0M7a0JBVmxELFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsYUFBYSxDQUFDO29CQUN4QixTQUFTLEVBQUU7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLDJCQUEyQjs0QkFDcEMsUUFBUSxFQUFFLHdDQUF3Qzs0QkFDbEQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBpc3RhbmJ1bCBpZ25vcmUgZmlsZSAqL1xuXG4vKipcbiAqIE5PVElDRTogRE8gTk9UIE1PRElGWSBUSElTIEZJTEUhXG4gKiBUaGUgY29udGVudHMgb2YgdGhpcyBmaWxlIHdlcmUgYXV0b21hdGljYWxseSBnZW5lcmF0ZWQgYnlcbiAqIHRoZSAnbmcgZ2VuZXJhdGUgQHNreXV4L2kxOG46bGliLXJlc291cmNlcy1tb2R1bGUgbGliL21vZHVsZXMvc2hhcmVkL3NreS1hbmd1bGFyLXRyZWUtY29tcG9uZW50JyBzY2hlbWF0aWMuXG4gKiBUbyB1cGRhdGUgdGhpcyBmaWxlLCBzaW1wbHkgcmVydW4gdGhlIGNvbW1hbmQuXG4gKi9cbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBTS1lfTElCX1JFU09VUkNFU19QUk9WSURFUlMsXG4gIFNreUFwcExvY2FsZUluZm8sXG4gIFNreUkxOG5Nb2R1bGUsXG4gIFNreUxpYlJlc291cmNlcyxcbiAgU2t5TGliUmVzb3VyY2VzUHJvdmlkZXIsXG4gIFNreUxpYlJlc291cmNlc1NlcnZpY2UsXG4gIGdldExpYlN0cmluZ0ZvckxvY2FsZSxcbn0gZnJvbSAnQHNreXV4L2kxOG4nO1xuXG5jb25zdCBSRVNPVVJDRVM6IHsgW2xvY2FsZTogc3RyaW5nXTogU2t5TGliUmVzb3VyY2VzIH0gPSB7XG4gICdFTi1VUyc6IHtcbiAgICBza3l1eF9hbmd1bGFyX3RyZWVfY2xlYXJfYWxsOiB7IG1lc3NhZ2U6ICdDbGVhciBhbGwnIH0sXG4gICAgc2t5dXhfYW5ndWxhcl90cmVlX2NsaWNrX3RvX2V4cGFuZDogeyBtZXNzYWdlOiAnQ2xpY2sgdG8gZXhwYW5kJyB9LFxuICAgIHNreXV4X2FuZ3VsYXJfdHJlZV9jb2xsYXBzZV9hbGw6IHsgbWVzc2FnZTogJ0NvbGxhcHNlJyB9LFxuICAgIHNreXV4X2FuZ3VsYXJfdHJlZV9leHBhbmRfYWxsOiB7IG1lc3NhZ2U6ICdFeHBhbmQnIH0sXG4gICAgc2t5dXhfYW5ndWxhcl90cmVlX3NlbGVjdF9hbGw6IHsgbWVzc2FnZTogJ1NlbGVjdCBhbGwnIH0sXG4gIH0sXG59O1xuXG5Ta3lMaWJSZXNvdXJjZXNTZXJ2aWNlLmFkZFJlc291cmNlcyhSRVNPVVJDRVMpO1xuXG5leHBvcnQgY2xhc3MgU2t5QW5ndWxhclRyZWVDb21wb25lbnRSZXNvdXJjZXNQcm92aWRlclxuICBpbXBsZW1lbnRzIFNreUxpYlJlc291cmNlc1Byb3ZpZGVyXG57XG4gIHB1YmxpYyBnZXRTdHJpbmcoXG4gICAgbG9jYWxlSW5mbzogU2t5QXBwTG9jYWxlSW5mbyxcbiAgICBuYW1lOiBzdHJpbmdcbiAgKTogc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gZ2V0TGliU3RyaW5nRm9yTG9jYWxlKFJFU09VUkNFUywgbG9jYWxlSW5mby5sb2NhbGUsIG5hbWUpO1xuICB9XG59XG5cbi8qKlxuICogSW1wb3J0IGludG8gYW55IGNvbXBvbmVudCBsaWJyYXJ5IG1vZHVsZSB0aGF0IG5lZWRzIHRvIHVzZSByZXNvdXJjZSBzdHJpbmdzLlxuICovXG5ATmdNb2R1bGUoe1xuICBleHBvcnRzOiBbU2t5STE4bk1vZHVsZV0sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IFNLWV9MSUJfUkVTT1VSQ0VTX1BST1ZJREVSUyxcbiAgICAgIHVzZUNsYXNzOiBTa3lBbmd1bGFyVHJlZUNvbXBvbmVudFJlc291cmNlc1Byb3ZpZGVyLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5QW5ndWxhclRyZWVDb21wb25lbnRSZXNvdXJjZXNNb2R1bGUge31cbiJdfQ==
|
|
@@ -13,8 +13,9 @@ import { SkyIconModule } from '@skyux/indicators';
|
|
|
13
13
|
import * as i3 from '@skyux/layout';
|
|
14
14
|
import { SkyToolbarModule } from '@skyux/layout';
|
|
15
15
|
import * as i4 from '@skyux/i18n';
|
|
16
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
16
|
+
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
17
17
|
|
|
18
|
+
/* istanbul ignore file */
|
|
18
19
|
/**
|
|
19
20
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
20
21
|
* The contents of this file were automatically generated by
|
|
@@ -30,6 +31,7 @@ const RESOURCES = {
|
|
|
30
31
|
skyux_angular_tree_select_all: { message: 'Select all' },
|
|
31
32
|
},
|
|
32
33
|
};
|
|
34
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
33
35
|
class SkyAngularTreeComponentResourcesProvider {
|
|
34
36
|
getString(localeInfo, name) {
|
|
35
37
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -39,9 +41,9 @@ class SkyAngularTreeComponentResourcesProvider {
|
|
|
39
41
|
* Import into any component library module that needs to use resource strings.
|
|
40
42
|
*/
|
|
41
43
|
class SkyAngularTreeComponentResourcesModule {
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
43
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
44
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
45
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, exports: [SkyI18nModule] }); }
|
|
46
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, providers: [
|
|
45
47
|
{
|
|
46
48
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
47
49
|
useClass: SkyAngularTreeComponentResourcesProvider,
|
|
@@ -49,7 +51,7 @@ class SkyAngularTreeComponentResourcesModule {
|
|
|
49
51
|
},
|
|
50
52
|
], imports: [SkyI18nModule] }); }
|
|
51
53
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeComponentResourcesModule, decorators: [{
|
|
53
55
|
type: NgModule,
|
|
54
56
|
args: [{
|
|
55
57
|
exports: [SkyI18nModule],
|
|
@@ -67,10 +69,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
67
69
|
* @internal
|
|
68
70
|
*/
|
|
69
71
|
class SkyAngularTreeContextMenuComponent {
|
|
70
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 }); }
|
|
72
74
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeContextMenuComponent, decorators: [{
|
|
74
76
|
type: Component,
|
|
75
77
|
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" }]
|
|
76
78
|
}] });
|
|
@@ -93,10 +95,10 @@ class SkyAngularTreeAdapterService {
|
|
|
93
95
|
focusableEls[index].tabIndex = tabIndex;
|
|
94
96
|
}
|
|
95
97
|
}
|
|
96
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
97
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
98
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
99
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService }); }
|
|
98
100
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeAdapterService, decorators: [{
|
|
100
102
|
type: Injectable
|
|
101
103
|
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
|
|
102
104
|
|
|
@@ -122,10 +124,10 @@ class SkyTreeViewToolbarComponent {
|
|
|
122
124
|
onSelectAllClick() {
|
|
123
125
|
this.selectAllClick.emit();
|
|
124
126
|
}
|
|
125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTreeViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 }); }
|
|
127
129
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTreeViewToolbarComponent, decorators: [{
|
|
129
131
|
type: Component,
|
|
130
132
|
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" }]
|
|
131
133
|
}], propDecorators: { showSelectButtons: [{
|
|
@@ -306,10 +308,10 @@ class SkyAngularTreeWrapperComponent {
|
|
|
306
308
|
TREE_ACTIONS.TOGGLE_SELECTED(node.treeModel, node, event);
|
|
307
309
|
}
|
|
308
310
|
}
|
|
309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
310
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyAngularTreeWrapperComponent, selector: "sky-angular-tree-wrapper", inputs: { readOnly: "readOnly", selectLeafNodesOnly: "selectLeafNodesOnly", selectSingle: "selectSingle", showToolbar: "showToolbar" }, queries: [{ propertyName: "treeComponent", first: true, predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-angular-tree-wrapper\"\n [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n <sky-angular-tree-toolbar\n *ngIf=\"showToolbar\"\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n >\n </sky-angular-tree-toolbar>\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\"></ng-content>\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyTreeViewToolbarComponent, selector: "sky-angular-tree-toolbar", inputs: ["showSelectButtons"], outputs: ["clearAllClick", "collapseAllClick", "expandAllClick", "selectAllClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
311
313
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
313
315
|
type: Component,
|
|
314
316
|
args: [{ selector: 'sky-angular-tree-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-angular-tree-wrapper\"\n [class.sky-angular-tree-read-only]=\"readOnly\"\n>\n <sky-angular-tree-toolbar\n *ngIf=\"showToolbar\"\n [showSelectButtons]=\"showSelectButtons()\"\n (clearAllClick)=\"onClearAllClick()\"\n (collapseAllClick)=\"onCollapseAllClick()\"\n (expandAllClick)=\"onExpandAllClick()\"\n (selectAllClick)=\"onSelectAllClick()\"\n >\n </sky-angular-tree-toolbar>\n <div\n class=\"sky-angular-tree-root\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"multiselectable()\"\n >\n <ng-content select=\"tree-root\"></ng-content>\n </div>\n</div>\n", styles: [".sky-angular-tree-wrapper ::ng-deep .angular-tree-component{cursor:initial;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sky-angular-tree-wrapper ::ng-deep .node-wrapper{display:flex;align-items:center;padding:4px 5px;border-left:4px solid transparent}.sky-angular-tree-wrapper ::ng-deep .node-content-wrapper{display:flex;align-items:center;padding:0;cursor:pointer}.sky-angular-tree-wrapper ::ng-deep .tree-children{padding-left:30px;overflow:hidden}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children{color:#cdcfd2;cursor:pointer;min-height:19px;min-width:20px;margin:0 10px 0 0;padding:0;line-height:1}.sky-angular-tree-wrapper ::ng-deep .sky-toggle-children:hover{color:#979ba2;transition:color .15s}.sky-angular-tree-wrapper ::ng-deep .toggle-children-placeholder{display:inline-block;height:19px;width:20px;margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-selected{background:#f1eef6}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-node-active{background-color:#eeeeef;color:#212327;border-left:4px solid #00b4f1}.sky-angular-tree-wrapper ::ng-deep sky-checkbox{display:inline-flex}.sky-angular-tree-wrapper ::ng-deep .sky-switch-control{margin:0 8px 0 0}.sky-angular-tree-wrapper ::ng-deep .sky-angular-tree-context-menu{margin:0 10px 0 0}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot{display:block;height:2px}.sky-angular-tree-wrapper ::ng-deep .node-drop-slot.is-dragging-over{height:20px;background:#eeeeef;border:1px solid #e2e3e4}.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep .node-content-wrapper{cursor:initial}\n"] }]
|
|
315
317
|
}], propDecorators: { readOnly: [{
|
|
@@ -549,10 +551,10 @@ class SkyAngularTreeNodeComponent {
|
|
|
549
551
|
return false;
|
|
550
552
|
}
|
|
551
553
|
}
|
|
552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
554
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyAngularTreeAdapterService }, { token: SkyAngularTreeWrapperComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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" }] }); }
|
|
554
556
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeNodeComponent, decorators: [{
|
|
556
558
|
type: Component,
|
|
557
559
|
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" }]
|
|
558
560
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyAngularTreeAdapterService }, { type: SkyAngularTreeWrapperComponent, decorators: [{
|
|
@@ -569,8 +571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
569
571
|
}] } });
|
|
570
572
|
|
|
571
573
|
class SkyAngularTreeModule {
|
|
572
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
573
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
574
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
575
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, declarations: [SkyAngularTreeContextMenuComponent,
|
|
574
576
|
SkyAngularTreeNodeComponent,
|
|
575
577
|
SkyAngularTreeWrapperComponent,
|
|
576
578
|
SkyTreeViewToolbarComponent], imports: [CommonModule,
|
|
@@ -579,14 +581,14 @@ class SkyAngularTreeModule {
|
|
|
579
581
|
SkyIconModule,
|
|
580
582
|
SkyToolbarModule,
|
|
581
583
|
TreeModule], exports: [SkyAngularTreeNodeComponent, SkyAngularTreeWrapperComponent] }); }
|
|
582
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
584
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, providers: [SkyCoreAdapterService], imports: [CommonModule,
|
|
583
585
|
SkyAngularTreeComponentResourcesModule,
|
|
584
586
|
SkyCheckboxModule,
|
|
585
587
|
SkyIconModule,
|
|
586
588
|
SkyToolbarModule,
|
|
587
589
|
TreeModule] }); }
|
|
588
590
|
}
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAngularTreeModule, decorators: [{
|
|
590
592
|
type: NgModule,
|
|
591
593
|
args: [{
|
|
592
594
|
declarations: [
|