@clr/angular 16.0.2 → 16.0.3
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/clarity.api.md +2 -0
- package/data/tree-view/tree-node.d.ts +1 -0
- package/esm2020/data/tree-view/tree-node.mjs +6 -3
- package/esm2020/popover/signpost/signpost-content.mjs +3 -3
- package/fesm2015/clr-angular.mjs +7 -4
- package/fesm2015/clr-angular.mjs.map +1 -1
- package/fesm2020/clr-angular.mjs +7 -4
- package/fesm2020/clr-angular.mjs.map +1 -1
- package/package.json +2 -2
package/fesm2020/clr-angular.mjs
CHANGED
|
@@ -18367,6 +18367,9 @@ class ClrTreeNode {
|
|
|
18367
18367
|
return null;
|
|
18368
18368
|
}
|
|
18369
18369
|
}
|
|
18370
|
+
get treeNodeContentTextOnly() {
|
|
18371
|
+
return this.treeNodeLinkList.length === 0;
|
|
18372
|
+
}
|
|
18370
18373
|
get treeNodeLink() {
|
|
18371
18374
|
return this.treeNodeLinkList && this.treeNodeLinkList.first;
|
|
18372
18375
|
}
|
|
@@ -18527,7 +18530,7 @@ class ClrTreeNode {
|
|
|
18527
18530
|
}
|
|
18528
18531
|
}
|
|
18529
18532
|
ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
18530
|
-
ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { expandable: ["clrExpandable", "expandable"], selected: ["clrSelected", "selected"], expanded: ["clrExpanded", "expanded"], clrForTypeAhead: "clrForTypeAhead" }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n #contentContainer\n role=\"treeitem\"\n class=\"clr-tree-node-content-container\"\n tabindex=\"-1\"\n [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n [attr.aria-selected]=\"ariaSelected\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"broadcastFocusOnContainer()\"\n>\n <button\n *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"clr-treenode-caret\"\n (click)=\"expandService.toggle();\"\n (focus)=\"focusTreeNode()\"\n >\n <cds-icon\n class=\"clr-treenode-caret-icon\"\n shape=\"angle\"\n [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n ></cds-icon>\n </button>\n <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n <span class=\"clr-treenode-spinner spinner\"></span>\n </div>\n <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n <input\n aria-hidden=\"true\"\n type=\"checkbox\"\n id=\"{{nodeId}}-check\"\n class=\"clr-checkbox\"\n [checked]=\"_model.selected.value === STATES.SELECTED\"\n [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n (change)=\"_model.toggleSelection(featuresService.eager)\"\n (focus)=\"focusTreeNode()\"\n tabindex=\"-1\"\n />\n <label for=\"{{nodeId}}-check\" class=\"clr-control-label\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div
|
|
18533
|
+
ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { expandable: ["clrExpandable", "expandable"], selected: ["clrSelected", "selected"], expanded: ["clrExpanded", "expanded"], clrForTypeAhead: "clrForTypeAhead" }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n #contentContainer\n role=\"treeitem\"\n class=\"clr-tree-node-content-container\"\n tabindex=\"-1\"\n [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n [attr.aria-selected]=\"ariaSelected\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"broadcastFocusOnContainer()\"\n>\n <button\n *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"clr-treenode-caret\"\n (click)=\"expandService.toggle();\"\n (focus)=\"focusTreeNode()\"\n >\n <cds-icon\n class=\"clr-treenode-caret-icon\"\n shape=\"angle\"\n [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n ></cds-icon>\n </button>\n <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n <span class=\"clr-treenode-spinner spinner\"></span>\n </div>\n <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n <input\n aria-hidden=\"true\"\n type=\"checkbox\"\n id=\"{{nodeId}}-check\"\n class=\"clr-checkbox\"\n [checked]=\"_model.selected.value === STATES.SELECTED\"\n [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n (change)=\"_model.toggleSelection(featuresService.eager)\"\n (focus)=\"focusTreeNode()\"\n tabindex=\"-1\"\n />\n <label for=\"{{nodeId}}-check\" class=\"clr-control-label\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div\n class=\"clr-treenode-content\"\n [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n (mouseup)=\"focusTreeNode()\"\n *ngIf=\"!featuresService.selectable\"\n >\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </div>\n\n <ng-template #treenodeContent>\n <ng-content></ng-content>\n <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n <span *ngIf=\"ariaSelected\"> selected</span>\n <span *ngIf=\"!ariaSelected\"> unselected</span>\n </div>\n </ng-template>\n</div>\n<div\n class=\"clr-treenode-children\"\n [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n <ng-content select=\"clr-tree-node\"></ng-content>\n <ng-content select=\"[clrIfExpanded]\"></ng-content>\n <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], animations: [
|
|
18531
18534
|
trigger('toggleChildrenAnim', [
|
|
18532
18535
|
transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
|
|
18533
18536
|
transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
|
|
@@ -18546,7 +18549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
18546
18549
|
]),
|
|
18547
18550
|
], host: {
|
|
18548
18551
|
'[class.clr-tree-node]': 'true',
|
|
18549
|
-
}, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n #contentContainer\n role=\"treeitem\"\n class=\"clr-tree-node-content-container\"\n tabindex=\"-1\"\n [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n [attr.aria-selected]=\"ariaSelected\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"broadcastFocusOnContainer()\"\n>\n <button\n *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"clr-treenode-caret\"\n (click)=\"expandService.toggle();\"\n (focus)=\"focusTreeNode()\"\n >\n <cds-icon\n class=\"clr-treenode-caret-icon\"\n shape=\"angle\"\n [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n ></cds-icon>\n </button>\n <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n <span class=\"clr-treenode-spinner spinner\"></span>\n </div>\n <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n <input\n aria-hidden=\"true\"\n type=\"checkbox\"\n id=\"{{nodeId}}-check\"\n class=\"clr-checkbox\"\n [checked]=\"_model.selected.value === STATES.SELECTED\"\n [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n (change)=\"_model.toggleSelection(featuresService.eager)\"\n (focus)=\"focusTreeNode()\"\n tabindex=\"-1\"\n />\n <label for=\"{{nodeId}}-check\" class=\"clr-control-label\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div
|
|
18552
|
+
}, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<div\n #contentContainer\n role=\"treeitem\"\n class=\"clr-tree-node-content-container\"\n tabindex=\"-1\"\n [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n [attr.aria-selected]=\"ariaSelected\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"broadcastFocusOnContainer()\"\n>\n <button\n *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n aria-hidden=\"true\"\n type=\"button\"\n tabindex=\"-1\"\n class=\"clr-treenode-caret\"\n (click)=\"expandService.toggle();\"\n (focus)=\"focusTreeNode()\"\n >\n <cds-icon\n class=\"clr-treenode-caret-icon\"\n shape=\"angle\"\n [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n ></cds-icon>\n </button>\n <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n <span class=\"clr-treenode-spinner spinner\"></span>\n </div>\n <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n <input\n aria-hidden=\"true\"\n type=\"checkbox\"\n id=\"{{nodeId}}-check\"\n class=\"clr-checkbox\"\n [checked]=\"_model.selected.value === STATES.SELECTED\"\n [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n (change)=\"_model.toggleSelection(featuresService.eager)\"\n (focus)=\"focusTreeNode()\"\n tabindex=\"-1\"\n />\n <label for=\"{{nodeId}}-check\" class=\"clr-control-label\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div\n class=\"clr-treenode-content\"\n [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n (mouseup)=\"focusTreeNode()\"\n *ngIf=\"!featuresService.selectable\"\n >\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </div>\n\n <ng-template #treenodeContent>\n <ng-content></ng-content>\n <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n <span *ngIf=\"ariaSelected\"> selected</span>\n <span *ngIf=\"!ariaSelected\"> unselected</span>\n </div>\n </ng-template>\n</div>\n<div\n class=\"clr-treenode-children\"\n [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n <ng-content select=\"clr-tree-node\"></ng-content>\n <ng-content select=\"[clrIfExpanded]\"></ng-content>\n <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n" }]
|
|
18550
18553
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
18551
18554
|
type: Inject,
|
|
18552
18555
|
args: [PLATFORM_ID]
|
|
@@ -22433,7 +22436,7 @@ ClrSignpostContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
22433
22436
|
<cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
|
|
22434
22437
|
</button>
|
|
22435
22438
|
</div>
|
|
22436
|
-
<div class="signpost-content-body">
|
|
22439
|
+
<div class="signpost-content-body" tabindex="0">
|
|
22437
22440
|
<ng-content></ng-content>
|
|
22438
22441
|
</div>
|
|
22439
22442
|
</div>
|
|
@@ -22456,7 +22459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
22456
22459
|
<cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
|
|
22457
22460
|
</button>
|
|
22458
22461
|
</div>
|
|
22459
|
-
<div class="signpost-content-body">
|
|
22462
|
+
<div class="signpost-content-body" tabindex="0">
|
|
22460
22463
|
<ng-content></ng-content>
|
|
22461
22464
|
</div>
|
|
22462
22465
|
</div>
|