@clr/angular 16.0.1 → 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/accordion/accordion-panel.d.ts +12 -0
- package/accordion/accordion.d.ts +3 -0
- package/clarity.api.md +2 -5
- package/data/tree-view/tree-node.d.ts +1 -0
- package/esm2020/accordion/accordion-panel.mjs +13 -1
- package/esm2020/accordion/accordion.mjs +4 -1
- package/esm2020/data/tree-view/tree-node.mjs +6 -3
- package/esm2020/popover/signpost/signpost-content.mjs +3 -3
- package/fesm2015/clr-angular.mjs +22 -4
- package/fesm2015/clr-angular.mjs.map +1 -1
- package/fesm2020/clr-angular.mjs +22 -4
- package/fesm2020/clr-angular.mjs.map +1 -1
- package/package.json +2 -2
package/fesm2020/clr-angular.mjs
CHANGED
|
@@ -535,8 +535,17 @@ class ClrAccordionPanel {
|
|
|
535
535
|
this.accordionService = accordionService;
|
|
536
536
|
this.ifExpandService = ifExpandService;
|
|
537
537
|
this.cdr = cdr;
|
|
538
|
+
/**
|
|
539
|
+
* Whether the panel is disabled.
|
|
540
|
+
*/
|
|
538
541
|
this.disabled = false;
|
|
542
|
+
/**
|
|
543
|
+
* Whether the panel is open.
|
|
544
|
+
*/
|
|
539
545
|
this.panelOpen = false;
|
|
546
|
+
/**
|
|
547
|
+
* Event that is emitted when the panel is opened or closed. The boolean emitted indicates the current state.
|
|
548
|
+
*/
|
|
540
549
|
this.panelOpenChange = new EventEmitter();
|
|
541
550
|
this.AccordionStatus = AccordionStatus;
|
|
542
551
|
this.isAccordion = true;
|
|
@@ -565,6 +574,9 @@ class ClrAccordionPanel {
|
|
|
565
574
|
this.accordionService.disablePanel(this.id, changes.disabled.currentValue);
|
|
566
575
|
}
|
|
567
576
|
}
|
|
577
|
+
/**
|
|
578
|
+
* Toggles this panel open or closed.
|
|
579
|
+
*/
|
|
568
580
|
togglePanel() {
|
|
569
581
|
this.accordionService.togglePanel(this.id);
|
|
570
582
|
}
|
|
@@ -638,6 +650,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
638
650
|
class ClrAccordion {
|
|
639
651
|
constructor(accordionService) {
|
|
640
652
|
this.accordionService = accordionService;
|
|
653
|
+
/**
|
|
654
|
+
* Whether the accordion supports multiple panels opened at the same time.
|
|
655
|
+
*/
|
|
641
656
|
this.multiPanel = false;
|
|
642
657
|
this.subscriptions = [];
|
|
643
658
|
}
|
|
@@ -18352,6 +18367,9 @@ class ClrTreeNode {
|
|
|
18352
18367
|
return null;
|
|
18353
18368
|
}
|
|
18354
18369
|
}
|
|
18370
|
+
get treeNodeContentTextOnly() {
|
|
18371
|
+
return this.treeNodeLinkList.length === 0;
|
|
18372
|
+
}
|
|
18355
18373
|
get treeNodeLink() {
|
|
18356
18374
|
return this.treeNodeLinkList && this.treeNodeLinkList.first;
|
|
18357
18375
|
}
|
|
@@ -18512,7 +18530,7 @@ class ClrTreeNode {
|
|
|
18512
18530
|
}
|
|
18513
18531
|
}
|
|
18514
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 });
|
|
18515
|
-
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: [
|
|
18516
18534
|
trigger('toggleChildrenAnim', [
|
|
18517
18535
|
transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
|
|
18518
18536
|
transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
|
|
@@ -18531,7 +18549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
18531
18549
|
]),
|
|
18532
18550
|
], host: {
|
|
18533
18551
|
'[class.clr-tree-node]': 'true',
|
|
18534
|
-
}, 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" }]
|
|
18535
18553
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
18536
18554
|
type: Inject,
|
|
18537
18555
|
args: [PLATFORM_ID]
|
|
@@ -22418,7 +22436,7 @@ ClrSignpostContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
22418
22436
|
<cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
|
|
22419
22437
|
</button>
|
|
22420
22438
|
</div>
|
|
22421
|
-
<div class="signpost-content-body">
|
|
22439
|
+
<div class="signpost-content-body" tabindex="0">
|
|
22422
22440
|
<ng-content></ng-content>
|
|
22423
22441
|
</div>
|
|
22424
22442
|
</div>
|
|
@@ -22441,7 +22459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
22441
22459
|
<cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
|
|
22442
22460
|
</button>
|
|
22443
22461
|
</div>
|
|
22444
|
-
<div class="signpost-content-body">
|
|
22462
|
+
<div class="signpost-content-body" tabindex="0">
|
|
22445
22463
|
<ng-content></ng-content>
|
|
22446
22464
|
</div>
|
|
22447
22465
|
</div>
|