@clr/angular 15.0.0-rc.1 → 15.0.0

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.
@@ -2775,10 +2775,10 @@ class ClrButtonGroup {
2775
2775
  }
2776
2776
  }
2777
2777
  ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }], target: i0.ɵɵFactoryTarget.Component });
2778
- ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService], queries: [{ propertyName: "buttons", predicate: ClrButton }], hostDirectives: [{ directive: PopoverHostDirective }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n <button\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"commonStrings.keys.rowActions\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n </div>\n </div>\n</ng-container>\n<ng-template #ref>\n <ng-container *ngFor=\"let menuButton of menuButtons\">\n <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
2778
+ ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService], queries: [{ propertyName: "buttons", predicate: ClrButton }], hostDirectives: [{ directive: PopoverHostDirective }], 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<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n <button\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"commonStrings.keys.rowActions\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n </div>\n </div>\n</ng-container>\n<ng-template #ref>\n <ng-container *ngFor=\"let menuButton of menuButtons\">\n <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
2779
2779
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrButtonGroup, decorators: [{
2780
2780
  type: Component,
2781
- args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService], hostDirectives: [PopoverHostDirective], host: { '[class.btn-group]': 'true' }, template: "<!--\n ~ Copyright (c) 2016-2021 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<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n <button\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"commonStrings.keys.rowActions\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n </div>\n </div>\n</ng-container>\n<ng-template #ref>\n <ng-container *ngFor=\"let menuButton of menuButtons\">\n <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </ng-container>\n</ng-template>\n" }]
2781
+ args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService], hostDirectives: [PopoverHostDirective], host: { '[class.btn-group]': 'true' }, 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<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n <button\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"commonStrings.keys.rowActions\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n </div>\n </div>\n</ng-container>\n<ng-template #ref>\n <ng-container *ngFor=\"let menuButton of menuButtons\">\n <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </ng-container>\n</ng-template>\n" }]
2782
2782
  }], ctorParameters: function () { return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: ClrCommonStringsService }, { type: ClrDestroyService }]; }, propDecorators: { buttons: [{
2783
2783
  type: ContentChildren,
2784
2784
  args: [ClrButton]
@@ -3276,12 +3276,7 @@ class IfControlStateService {
3276
3276
  // These status values are mutually exclusive, so a control
3277
3277
  // cannot be both valid AND invalid or invalid AND disabled.
3278
3278
  const status = CONTROL_STATE[this.control.status];
3279
- // At some point, with Angular 14, we started receiving the update for the control.touched
3280
- // later than this moment in code. It depends on the order of imports of ClarityModule and
3281
- // the FormsModule. This delay makes sure the touched state is properly updated.
3282
- setTimeout(() => {
3283
- this._statusChanges.next(this.control.touched && ['VALID', 'INVALID'].includes(status) ? status : CONTROL_STATE.NONE);
3284
- });
3279
+ this._statusChanges.next(['VALID', 'INVALID'].includes(status) ? status : CONTROL_STATE.NONE);
3285
3280
  }
3286
3281
  }
3287
3282
  // Clean up subscriptions
@@ -6457,7 +6452,7 @@ ClrCombobox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
6457
6452
  IF_ACTIVE_ID_PROVIDER,
6458
6453
  FOCUS_SERVICE_PROVIDER,
6459
6454
  COMBOBOX_FOCUS_HANDLER_PROVIDER,
6460
- ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }, { propertyName: "options", first: true, predicate: ClrOptions, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: PopoverHostDirective }], ngImport: i0, template: "<!--\n* Copyright (c) 2016-2021 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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n width of the component, after being wrapped to a new line -->\n<div\n class=\"clr-combobox-wrapper\"\n clrPopoverAnchor\n (click)=\"focusInput()\"\n [class.multi]=\"multiSelect\"\n [class.invalid]=\"invalid\"\n>\n <span\n *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n role=\"grid\"\n clrRovingTabindex\n [clrRovingTabindexDisabled]=\"control?.disabled\"\n clrDirection=\"both\"\n [attr.aria-label]=\"getSelectionAriaLabel()\"\n [attr.aria-disabled]=\"control?.disabled? true: null\"\n >\n <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n <span role=\"gridcell\">\n <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n <ng-container\n *ngIf=\"optionSelected\"\n [ngTemplateOutlet]=\"optionSelected.template\"\n [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n ></ng-container>\n </span>\n </span>\n <span role=\"gridcell\">\n <button\n clrKeyFocusItem\n type=\"button\"\n class=\"clr-combobox-remove-btn\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n (click)=\"unselect(item)\"\n >\n <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n </button>\n </span>\n </span>\n </span>\n\n <span class=\"clr-combobox-input-wrapper\">\n <input\n #textboxInput\n type=\"text\"\n role=\"combobox\"\n [id]=\"inputId()\"\n class=\"clr-input clr-combobox-input\"\n [(ngModel)]=\"searchText\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [attr.aria-expanded]=\"openState\"\n [attr.aria-owns]=\"ariaOwns\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [attr.aria-invalid]=\"control?.invalid? true: null\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-activedescendant]=\"getActiveDescendant()\"\n [attr.placeholder]=\"placeholder\"\n />\n </span>\n\n <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n <button\n clrPopoverOpenCloseButton\n #trigger\n type=\"button\"\n class=\"clr-combobox-trigger\"\n tabindex=\"-1\"\n [disabled]=\"control?.disabled || null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n >\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n\n <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n Additionally 'outsideClickToClose' has complex handling that's necessary\n to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }, { kind: "directive", type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
6455
+ ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }, { propertyName: "options", first: true, predicate: ClrOptions, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: PopoverHostDirective }], 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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n width of the component, after being wrapped to a new line -->\n<div\n class=\"clr-combobox-wrapper\"\n clrPopoverAnchor\n (click)=\"focusInput()\"\n [class.multi]=\"multiSelect\"\n [class.invalid]=\"invalid\"\n>\n <span\n *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n role=\"grid\"\n clrRovingTabindex\n [clrRovingTabindexDisabled]=\"control?.disabled\"\n clrDirection=\"both\"\n [attr.aria-label]=\"getSelectionAriaLabel()\"\n [attr.aria-disabled]=\"control?.disabled? true: null\"\n >\n <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n <span role=\"gridcell\">\n <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n <ng-container\n *ngIf=\"optionSelected\"\n [ngTemplateOutlet]=\"optionSelected.template\"\n [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n ></ng-container>\n </span>\n </span>\n <span role=\"gridcell\">\n <button\n clrKeyFocusItem\n type=\"button\"\n class=\"clr-combobox-remove-btn\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n (click)=\"unselect(item)\"\n >\n <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n </button>\n </span>\n </span>\n </span>\n\n <span class=\"clr-combobox-input-wrapper\">\n <input\n #textboxInput\n type=\"text\"\n role=\"combobox\"\n [id]=\"inputId()\"\n class=\"clr-input clr-combobox-input\"\n [(ngModel)]=\"searchText\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [attr.aria-expanded]=\"openState\"\n [attr.aria-owns]=\"ariaOwns\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [attr.aria-invalid]=\"control?.invalid? true: null\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-activedescendant]=\"getActiveDescendant()\"\n [attr.placeholder]=\"placeholder\"\n />\n </span>\n\n <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n <button\n clrPopoverOpenCloseButton\n #trigger\n type=\"button\"\n class=\"clr-combobox-trigger\"\n tabindex=\"-1\"\n [disabled]=\"control?.disabled || null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n >\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n\n <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n Additionally 'outsideClickToClose' has complex handling that's necessary\n to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }, { kind: "directive", type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
6461
6456
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrCombobox, decorators: [{
6462
6457
  type: Component,
6463
6458
  args: [{ selector: 'clr-combobox', providers: [
@@ -6470,7 +6465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
6470
6465
  '[class.aria-required]': 'true',
6471
6466
  '[class.clr-combobox]': 'true',
6472
6467
  '[class.clr-combobox-disabled]': 'control?.disabled',
6473
- }, template: "<!--\n* Copyright (c) 2016-2021 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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n width of the component, after being wrapped to a new line -->\n<div\n class=\"clr-combobox-wrapper\"\n clrPopoverAnchor\n (click)=\"focusInput()\"\n [class.multi]=\"multiSelect\"\n [class.invalid]=\"invalid\"\n>\n <span\n *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n role=\"grid\"\n clrRovingTabindex\n [clrRovingTabindexDisabled]=\"control?.disabled\"\n clrDirection=\"both\"\n [attr.aria-label]=\"getSelectionAriaLabel()\"\n [attr.aria-disabled]=\"control?.disabled? true: null\"\n >\n <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n <span role=\"gridcell\">\n <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n <ng-container\n *ngIf=\"optionSelected\"\n [ngTemplateOutlet]=\"optionSelected.template\"\n [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n ></ng-container>\n </span>\n </span>\n <span role=\"gridcell\">\n <button\n clrKeyFocusItem\n type=\"button\"\n class=\"clr-combobox-remove-btn\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n (click)=\"unselect(item)\"\n >\n <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n </button>\n </span>\n </span>\n </span>\n\n <span class=\"clr-combobox-input-wrapper\">\n <input\n #textboxInput\n type=\"text\"\n role=\"combobox\"\n [id]=\"inputId()\"\n class=\"clr-input clr-combobox-input\"\n [(ngModel)]=\"searchText\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [attr.aria-expanded]=\"openState\"\n [attr.aria-owns]=\"ariaOwns\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [attr.aria-invalid]=\"control?.invalid? true: null\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-activedescendant]=\"getActiveDescendant()\"\n [attr.placeholder]=\"placeholder\"\n />\n </span>\n\n <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n <button\n clrPopoverOpenCloseButton\n #trigger\n type=\"button\"\n class=\"clr-combobox-trigger\"\n tabindex=\"-1\"\n [disabled]=\"control?.disabled || null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n >\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n\n <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n Additionally 'outsideClickToClose' has complex handling that's necessary\n to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n <ng-content></ng-content>\n</div>\n" }]
6468
+ }, 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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n width of the component, after being wrapped to a new line -->\n<div\n class=\"clr-combobox-wrapper\"\n clrPopoverAnchor\n (click)=\"focusInput()\"\n [class.multi]=\"multiSelect\"\n [class.invalid]=\"invalid\"\n>\n <span\n *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n role=\"grid\"\n clrRovingTabindex\n [clrRovingTabindexDisabled]=\"control?.disabled\"\n clrDirection=\"both\"\n [attr.aria-label]=\"getSelectionAriaLabel()\"\n [attr.aria-disabled]=\"control?.disabled? true: null\"\n >\n <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n <span role=\"gridcell\">\n <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n <ng-container\n *ngIf=\"optionSelected\"\n [ngTemplateOutlet]=\"optionSelected.template\"\n [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n ></ng-container>\n </span>\n </span>\n <span role=\"gridcell\">\n <button\n clrKeyFocusItem\n type=\"button\"\n class=\"clr-combobox-remove-btn\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n (click)=\"unselect(item)\"\n >\n <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n </button>\n </span>\n </span>\n </span>\n\n <span class=\"clr-combobox-input-wrapper\">\n <input\n #textboxInput\n type=\"text\"\n role=\"combobox\"\n [id]=\"inputId()\"\n class=\"clr-input clr-combobox-input\"\n [(ngModel)]=\"searchText\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [attr.aria-expanded]=\"openState\"\n [attr.aria-owns]=\"ariaOwns\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n autocomplete=\"off\"\n [attr.aria-invalid]=\"control?.invalid? true: null\"\n [disabled]=\"control?.disabled? true: null\"\n [attr.aria-activedescendant]=\"getActiveDescendant()\"\n [attr.placeholder]=\"placeholder\"\n />\n </span>\n\n <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n <button\n clrPopoverOpenCloseButton\n #trigger\n type=\"button\"\n class=\"clr-combobox-trigger\"\n tabindex=\"-1\"\n [disabled]=\"control?.disabled || null\"\n [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n >\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n\n <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n Additionally 'outsideClickToClose' has complex handling that's necessary\n to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n <ng-content></ng-content>\n</div>\n" }]
6474
6469
  }], ctorParameters: function () {
6475
6470
  return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
6476
6471
  type: Self
@@ -8753,7 +8748,7 @@ class ClrDatepickerViewManager {
8753
8748
  }
8754
8749
  }
8755
8750
  ClrDatepickerViewManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatepickerViewManager, deps: [{ token: ClrCommonStringsService }, { token: ViewManagerService }], target: i0.ɵɵFactoryTarget.Component });
8756
- ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, template: "<!--\n* Copyright (c) 2016-2021 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrMonthpicker, selector: "clr-monthpicker" }, { kind: "component", type: ClrYearpicker, selector: "clr-yearpicker" }, { kind: "component", type: ClrDaypicker, selector: "clr-daypicker" }] });
8751
+ ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrMonthpicker, selector: "clr-monthpicker" }, { kind: "component", type: ClrYearpicker, selector: "clr-yearpicker" }, { kind: "component", type: ClrDaypicker, selector: "clr-daypicker" }] });
8757
8752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatepickerViewManager, decorators: [{
8758
8753
  type: Component,
8759
8754
  args: [{ selector: 'clr-datepicker-view-manager', providers: [DatepickerFocusService], host: {
@@ -8761,7 +8756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
8761
8756
  '[attr.aria-modal]': 'true',
8762
8757
  '[attr.aria-label]': 'commonStrings.keys.datepickerDialogLabel',
8763
8758
  role: 'dialog',
8764
- }, template: "<!--\n* Copyright (c) 2016-2021 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n" }]
8759
+ }, 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n" }]
8765
8760
  }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ViewManagerService }]; } });
8766
8761
 
8767
8762
  /*
@@ -12800,7 +12795,6 @@ class Items {
12800
12795
  * Indicates if the data is currently loading
12801
12796
  */
12802
12797
  this.loading = false;
12803
- // TODO: Verify that trackBy is registered for the *ngFor case too
12804
12798
  /**
12805
12799
  * Tracking function to identify objects. Default is reference equality.
12806
12800
  */
@@ -12980,6 +12974,16 @@ class ClrDatagridItems {
12980
12974
  this.items.trackBy = value;
12981
12975
  this.iterableProxy.ngForTrackBy = value;
12982
12976
  }
12977
+ /**
12978
+ * Asserts the correct type of the template context that the directive will render.
12979
+ * See https://angular.io/guide/structural-directives#typing-the-directives-context
12980
+ *
12981
+ * The presence of this method is a signal to the Ivy template type-check compiler that the
12982
+ * structural directive renders its template with a specific context type.
12983
+ */
12984
+ static ngTemplateContextGuard(_dir, _ctx) {
12985
+ return true;
12986
+ }
12983
12987
  ngDoCheck() {
12984
12988
  if (!this.differ) {
12985
12989
  this.differ = this.differs.find(this._rawItems).create(this.iterableProxy.ngForTrackBy);
@@ -13736,7 +13740,7 @@ class Selection {
13736
13740
  *
13737
13741
  */
13738
13742
  canItBeLocked() {
13739
- // We depend on the trackBy and all so there are part of the requirment of is item could be locked
13743
+ // We depend on the trackBy and all so there are part of the requirement of is item could be locked
13740
13744
  return this._selectionType !== SelectionType.None && Array.isArray(this._items.all);
13741
13745
  }
13742
13746
  /**
@@ -13756,11 +13760,11 @@ class Selection {
13756
13760
  }
13757
13761
  }
13758
13762
  /**
13759
- * Check is item locked or not by searcing into lockedRefs for entry
13763
+ * Check is item locked or not by searching into lockedRefs for entry
13760
13764
  */
13761
13765
  isLocked(item) {
13762
13766
  /**
13763
- * The check for selectionType will boost the performence by NOT searching
13767
+ * The check for selectionType will boost the performance by NOT searching
13764
13768
  * into the array when there is no need for that.
13765
13769
  */
13766
13770
  if (this.canItBeLocked()) {
@@ -14692,7 +14696,7 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
14692
14696
  ColumnsService,
14693
14697
  DisplayModeService,
14694
14698
  KeyNavigationGridController,
14695
- ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n <div class=\"datagrid-inner-wrapper\">\n <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n <div class=\"datagrid-table-wrapper\">\n <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n <div role=\"rowgroup\" class=\"datagrid-header\">\n <div role=\"row\" class=\"datagrid-row\">\n <div class=\"datagrid-row-master datagrid-row-flex\">\n <div class=\"datagrid-row-sticky\">\n <!--header for datagrid where you can select multiple rows -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n >\n <div class=\"clr-checkbox-wrapper\">\n <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n which is not able to transfer focus directly on the input when focused with the tab key -->\n <input\n type=\"checkbox\"\n [id]=\"selectAllId\"\n [(ngModel)]=\"allSelected\"\n [attr.aria-label]=\"commonStrings.keys.selectAll\"\n tabindex=\"-1\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n </label>\n </div>\n\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for datagrid where you can select one row only -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n *ngIf=\"rowActionService.hasActionableRow\"\n [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n </div>\n <div class=\"datagrid-row-scrollable\">\n <ng-container #projectedDisplayColumns></ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container #displayedRows></ng-container>\n <!-- Custom placeholder overrides the default empty one -->\n <ng-content select=\"clr-dg-placeholder\"></ng-content>\n <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n </div>\n </div>\n </div>\n <ng-content select=\"clr-dg-footer\"></ng-content>\n <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n <clr-spinner clrMedium>Loading</clr-spinner>\n </div>\n </div>\n <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n <div class=\"datagrid-calculation-header\">\n <ng-container #projectedCalculationColumns></ng-container>\n </div>\n <ng-container #calculationRows></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
14699
+ ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], 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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n <div class=\"datagrid-inner-wrapper\">\n <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n <div class=\"datagrid-table-wrapper\">\n <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n <div role=\"rowgroup\" class=\"datagrid-header\">\n <div role=\"row\" class=\"datagrid-row\">\n <div class=\"datagrid-row-master datagrid-row-flex\">\n <div class=\"datagrid-row-sticky\">\n <!--header for datagrid where you can select multiple rows -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n >\n <div class=\"clr-checkbox-wrapper\">\n <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n which is not able to transfer focus directly on the input when focused with the tab key -->\n <input\n type=\"checkbox\"\n [id]=\"selectAllId\"\n [(ngModel)]=\"allSelected\"\n [attr.aria-label]=\"commonStrings.keys.selectAll\"\n tabindex=\"-1\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n </label>\n </div>\n\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for datagrid where you can select one row only -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n *ngIf=\"rowActionService.hasActionableRow\"\n [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n </div>\n <div class=\"datagrid-row-scrollable\">\n <ng-container #projectedDisplayColumns></ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container #displayedRows></ng-container>\n <!-- Custom placeholder overrides the default empty one -->\n <ng-content select=\"clr-dg-placeholder\"></ng-content>\n <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n </div>\n </div>\n </div>\n <ng-content select=\"clr-dg-footer\"></ng-content>\n <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n <clr-spinner clrMedium>Loading</clr-spinner>\n </div>\n </div>\n <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n <div class=\"datagrid-calculation-header\">\n <ng-container #projectedCalculationColumns></ng-container>\n </div>\n <ng-container #calculationRows></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
14696
14700
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagrid, decorators: [{
14697
14701
  type: Component,
14698
14702
  args: [{ selector: 'clr-datagrid', providers: [
@@ -14714,7 +14718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
14714
14718
  ], host: {
14715
14719
  '[class.datagrid-host]': 'true',
14716
14720
  '[class.datagrid-detail-open]': 'detailService.isOpen',
14717
- }, template: "<!--\n ~ Copyright (c) 2016-2021 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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n <div class=\"datagrid-inner-wrapper\">\n <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n <div class=\"datagrid-table-wrapper\">\n <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n <div role=\"rowgroup\" class=\"datagrid-header\">\n <div role=\"row\" class=\"datagrid-row\">\n <div class=\"datagrid-row-master datagrid-row-flex\">\n <div class=\"datagrid-row-sticky\">\n <!--header for datagrid where you can select multiple rows -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n >\n <div class=\"clr-checkbox-wrapper\">\n <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n which is not able to transfer focus directly on the input when focused with the tab key -->\n <input\n type=\"checkbox\"\n [id]=\"selectAllId\"\n [(ngModel)]=\"allSelected\"\n [attr.aria-label]=\"commonStrings.keys.selectAll\"\n tabindex=\"-1\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n </label>\n </div>\n\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for datagrid where you can select one row only -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n *ngIf=\"rowActionService.hasActionableRow\"\n [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n </div>\n <div class=\"datagrid-row-scrollable\">\n <ng-container #projectedDisplayColumns></ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container #displayedRows></ng-container>\n <!-- Custom placeholder overrides the default empty one -->\n <ng-content select=\"clr-dg-placeholder\"></ng-content>\n <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n </div>\n </div>\n </div>\n <ng-content select=\"clr-dg-footer\"></ng-content>\n <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n <clr-spinner clrMedium>Loading</clr-spinner>\n </div>\n </div>\n <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n <div class=\"datagrid-calculation-header\">\n <ng-container #projectedCalculationColumns></ng-container>\n </div>\n <ng-container #calculationRows></ng-container>\n</div>\n" }]
14721
+ }, 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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n <div class=\"datagrid-inner-wrapper\">\n <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n <div class=\"datagrid-table-wrapper\">\n <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n <div role=\"rowgroup\" class=\"datagrid-header\">\n <div role=\"row\" class=\"datagrid-row\">\n <div class=\"datagrid-row-master datagrid-row-flex\">\n <div class=\"datagrid-row-sticky\">\n <!--header for datagrid where you can select multiple rows -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n >\n <div class=\"clr-checkbox-wrapper\">\n <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n which is not able to transfer focus directly on the input when focused with the tab key -->\n <input\n type=\"checkbox\"\n [id]=\"selectAllId\"\n [(ngModel)]=\"allSelected\"\n [attr.aria-label]=\"commonStrings.keys.selectAll\"\n tabindex=\"-1\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n </label>\n </div>\n\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for datagrid where you can select one row only -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n *ngIf=\"rowActionService.hasActionableRow\"\n [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n <div\n role=\"columnheader\"\n class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n >\n <div class=\"datagrid-column-separator\"></div>\n </div>\n </div>\n <div class=\"datagrid-row-scrollable\">\n <ng-container #projectedDisplayColumns></ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container #displayedRows></ng-container>\n <!-- Custom placeholder overrides the default empty one -->\n <ng-content select=\"clr-dg-placeholder\"></ng-content>\n <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n </div>\n </div>\n </div>\n <ng-content select=\"clr-dg-footer\"></ng-content>\n <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n <clr-spinner clrMedium>Loading</clr-spinner>\n </div>\n </div>\n <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n <div class=\"datagrid-calculation-header\">\n <ng-container #projectedCalculationColumns></ng-container>\n </div>\n <ng-container #calculationRows></ng-container>\n</div>\n" }]
14718
14722
  }], ctorParameters: function () {
14719
14723
  return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
14720
14724
  type: Inject,
@@ -15061,6 +15065,9 @@ class ClrDatagridColumnToggle {
15061
15065
  anchor: ClrAlignment.START,
15062
15066
  content: ClrAlignment.START,
15063
15067
  };
15068
+ // Without tracking the checkboxes get rerendered on model update, which leads
15069
+ // to loss of focus after checkbox toggle.
15070
+ this.trackByFn = index => index;
15064
15071
  this.subscription = popoverToggleService.openChange.subscribe(change => (this.openState = change));
15065
15072
  }
15066
15073
  get allColumnsVisible() {
@@ -15094,11 +15101,6 @@ class ClrDatagridColumnToggle {
15094
15101
  allColumnsSelected() {
15095
15102
  this.allSelectedElement.nativeElement.focus();
15096
15103
  }
15097
- // Without tracking the checkboxes get rerendered on model update, which leads
15098
- // to loss of focus after checkbox toggle.
15099
- trackByFn(index) {
15100
- return index;
15101
- }
15102
15104
  }
15103
15105
  ClrDatagridColumnToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: ClrCommonStringsService }, { token: ColumnsService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
15104
15106
  ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: PopoverHostDirective }], ngImport: i0, template: `
@@ -18349,7 +18351,7 @@ class ClrTreeNode {
18349
18351
  }
18350
18352
  }
18351
18353
  ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.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 });
18352
- ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], 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-2021 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\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\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: [
18354
+ ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], 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\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\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: [
18353
18355
  trigger('toggleChildrenAnim', [
18354
18356
  transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
18355
18357
  transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -18368,7 +18370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
18368
18370
  ]),
18369
18371
  ], host: {
18370
18372
  '[class.clr-tree-node]': 'true',
18371
- }, template: "<!--\n ~ Copyright (c) 2016-2021 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\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\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" }]
18373
+ }, 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\">\n <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n </label>\n </div>\n <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\" *ngIf=\"!featuresService.selectable\">\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" }]
18372
18374
  }], ctorParameters: function () {
18373
18375
  return [{ type: undefined, decorators: [{
18374
18376
  type: Inject,
@@ -19773,10 +19775,10 @@ class ClrAlert {
19773
19775
  }
19774
19776
  }
19775
19777
  ClrAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
19776
- ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlert, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", closed: ["clrAlertClosed", "closed"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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 *ngIf=\"!_closed\"\n class=\"alert\"\n [ngClass]=\"alertClass\"\n [class.alert-hidden]=\"hidden\"\n [class.alert-sm]=\"isSmall\"\n [class.alert-app-level]=\"isAppLevel\"\n>\n <div class=\"alert-items\">\n <ng-content></ng-content>\n </div>\n <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n <cds-icon shape=\"window-close\"></cds-icon>\n </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
19778
+ ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlert, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", closed: ["clrAlertClosed", "closed"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], 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 *ngIf=\"!_closed\"\n class=\"alert\"\n [ngClass]=\"alertClass\"\n [class.alert-hidden]=\"hidden\"\n [class.alert-sm]=\"isSmall\"\n [class.alert-app-level]=\"isAppLevel\"\n>\n <div class=\"alert-items\">\n <ng-content></ng-content>\n </div>\n <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n <cds-icon shape=\"window-close\"></cds-icon>\n </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
19777
19779
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlert, decorators: [{
19778
19780
  type: Component,
19779
- args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], template: "<!--\n ~ Copyright (c) 2016-2021 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 *ngIf=\"!_closed\"\n class=\"alert\"\n [ngClass]=\"alertClass\"\n [class.alert-hidden]=\"hidden\"\n [class.alert-sm]=\"isSmall\"\n [class.alert-app-level]=\"isAppLevel\"\n>\n <div class=\"alert-items\">\n <ng-content></ng-content>\n </div>\n <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n <cds-icon shape=\"window-close\"></cds-icon>\n </button>\n</div>\n", styles: [":host{display:block}\n"] }]
19781
+ args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], 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 *ngIf=\"!_closed\"\n class=\"alert\"\n [ngClass]=\"alertClass\"\n [class.alert-hidden]=\"hidden\"\n [class.alert-sm]=\"isSmall\"\n [class.alert-app-level]=\"isAppLevel\"\n>\n <div class=\"alert-items\">\n <ng-content></ng-content>\n </div>\n <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n <cds-icon shape=\"window-close\"></cds-icon>\n </button>\n</div>\n", styles: [":host{display:block}\n"] }]
19780
19782
  }], ctorParameters: function () {
19781
19783
  return [{ type: AlertIconAndTypesService }, { type: i0.ChangeDetectorRef }, { type: MultiAlertService, decorators: [{
19782
19784
  type: Optional
@@ -19916,10 +19918,10 @@ class ClrAlertsPager {
19916
19918
  }
19917
19919
  }
19918
19920
  ClrAlertsPager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlertsPager, deps: [{ token: MultiAlertService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
19919
- ClrAlertsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: { currentAlert: ["clrCurrentAlert", "currentAlert"], currentAlertIndex: ["clrCurrentAlertIndex", "currentAlertIndex"] }, outputs: { currentAlertChange: "clrCurrentAlertChange", currentAlertIndexChange: "clrCurrentAlertIndexChange" }, host: { properties: { "class.alerts-pager": "true" } }, ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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 class=\"alerts-pager-control\">\n <div class=\"alerts-page-down\">\n <button class=\"alerts-pager-button\" (click)=\"pageDown()\">\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n </button>\n </div>\n <div class=\"alerts-pager-text\">{{this.multiAlertService.current+1}} / {{this.multiAlertService.count}}</div>\n <div class=\"alerts-page-up\">\n <button class=\"alerts-pager-button\" (click)=\"pageUp()\">\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
19921
+ ClrAlertsPager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: { currentAlert: ["clrCurrentAlert", "currentAlert"], currentAlertIndex: ["clrCurrentAlertIndex", "currentAlertIndex"] }, outputs: { currentAlertChange: "clrCurrentAlertChange", currentAlertIndexChange: "clrCurrentAlertIndexChange" }, host: { properties: { "class.alerts-pager": "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 class=\"alerts-pager-control\">\n <div class=\"alerts-page-down\">\n <button class=\"alerts-pager-button\" (click)=\"pageDown()\">\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n </button>\n </div>\n <div class=\"alerts-pager-text\">{{this.multiAlertService.current+1}} / {{this.multiAlertService.count}}</div>\n <div class=\"alerts-page-up\">\n <button class=\"alerts-pager-button\" (click)=\"pageUp()\">\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
19920
19922
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlertsPager, decorators: [{
19921
19923
  type: Component,
19922
- args: [{ selector: 'clr-alerts-pager', host: { '[class.alerts-pager]': 'true' }, template: "<!--\n ~ Copyright (c) 2016-2021 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 class=\"alerts-pager-control\">\n <div class=\"alerts-page-down\">\n <button class=\"alerts-pager-button\" (click)=\"pageDown()\">\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n </button>\n </div>\n <div class=\"alerts-pager-text\">{{this.multiAlertService.current+1}} / {{this.multiAlertService.count}}</div>\n <div class=\"alerts-page-up\">\n <button class=\"alerts-pager-button\" (click)=\"pageUp()\">\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n </button>\n </div>\n</div>\n" }]
19924
+ args: [{ selector: 'clr-alerts-pager', host: { '[class.alerts-pager]': 'true' }, 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 class=\"alerts-pager-control\">\n <div class=\"alerts-page-down\">\n <button class=\"alerts-pager-button\" (click)=\"pageDown()\">\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n </button>\n </div>\n <div class=\"alerts-pager-text\">{{this.multiAlertService.current+1}} / {{this.multiAlertService.count}}</div>\n <div class=\"alerts-page-up\">\n <button class=\"alerts-pager-button\" (click)=\"pageUp()\">\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n </button>\n </div>\n</div>\n" }]
19923
19925
  }], ctorParameters: function () { return [{ type: MultiAlertService }, { type: ClrCommonStringsService }]; }, propDecorators: { currentAlert: [{
19924
19926
  type: Input,
19925
19927
  args: ['clrCurrentAlert']
@@ -20000,7 +20002,7 @@ class ClrAlerts {
20000
20002
  }
20001
20003
  }
20002
20004
  ClrAlerts.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlerts, deps: [{ token: MultiAlertService }], target: i0.ɵɵFactoryTarget.Component });
20003
- ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertIndexChange: "clrCurrentAlertIndexChange", currentAlertChange: "clrCurrentAlertChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }] });
20005
+ ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertIndexChange: "clrCurrentAlertIndexChange", currentAlertChange: "clrCurrentAlertChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }] });
20004
20006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrAlerts, decorators: [{
20005
20007
  type: Component,
20006
20008
  args: [{ selector: 'clr-alerts', providers: [MultiAlertService], host: {
@@ -20009,7 +20011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
20009
20011
  '[class.alert-info]': "this.currentAlertType == 'info'",
20010
20012
  '[class.alert-success]': "this.currentAlertType == 'success'",
20011
20013
  '[class.alert-warning]': "this.currentAlertType == 'warning'",
20012
- }, template: "<!--\n ~ Copyright (c) 2016-2021 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"] }]
20014
+ }, 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"] }]
20013
20015
  }], ctorParameters: function () { return [{ type: MultiAlertService }]; }, propDecorators: { allAlerts: [{
20014
20016
  type: ContentChildren,
20015
20017
  args: [ClrAlert]
@@ -21576,7 +21578,7 @@ class ClrVerticalNav {
21576
21578
  }
21577
21579
  }
21578
21580
  ClrVerticalNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
21579
- ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2021 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<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n <button\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
21581
+ ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], 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<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <ng-content></ng-content>\n <button\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
21580
21582
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNav, decorators: [{
21581
21583
  type: Component,
21582
21584
  args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
@@ -21584,7 +21586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
21584
21586
  '[class.is-collapsed]': 'collapsed',
21585
21587
  '[class.has-nav-groups]': 'hasNavGroups',
21586
21588
  '[class.has-icons]': 'hasIcons',
21587
- }, template: "<!--\n ~ Copyright (c) 2016-2021 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<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <div role=\"list\">\n <ng-content></ng-content>\n </div>\n <button\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n" }]
21589
+ }, 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<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <ng-content></ng-content>\n <button\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n" }]
21588
21590
  }], ctorParameters: function () { return [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: ClrCommonStringsService }]; }, propDecorators: { collapsible: [{
21589
21591
  type: Input,
21590
21592
  args: ['clrVerticalNavCollapsible']
@@ -21833,7 +21835,7 @@ class ClrVerticalNavLink {
21833
21835
  }
21834
21836
  }
21835
21837
  ClrVerticalNavLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ClrVerticalNavLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: VerticalNavGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
21836
- ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { attributes: { "role": "listitem" }, classAttribute: "nav-link" }, ngImport: i0, template: `
21838
+ ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { classAttribute: "nav-link" }, ngImport: i0, template: `
21837
21839
  <ng-content select="[clrVerticalNavIcon]"></ng-content>
21838
21840
  <span class="nav-text">
21839
21841
  <ng-content></ng-content>
@@ -21851,7 +21853,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
21851
21853
  `,
21852
21854
  host: {
21853
21855
  class: 'nav-link',
21854
- role: 'listitem',
21855
21856
  },
21856
21857
  }]
21857
21858
  }], ctorParameters: function () {