@clr/angular 16.0.0 → 16.0.2

package/fesm2020/clr-angular.mjs

@@ -535,8 +535,17 @@ class ClrAccordionPanel {
         this.accordionService = accordionService;
         this.ifExpandService = ifExpandService;
         this.cdr = cdr;
+        /**
+         * Whether the panel is disabled.
+         */
         this.disabled = false;
+        /**
+         * Whether the panel is open.
+         */
         this.panelOpen = false;
+        /**
+         * Event that is emitted when the panel is opened or closed. The boolean emitted indicates the current state.
+         */
         this.panelOpenChange = new EventEmitter();
         this.AccordionStatus = AccordionStatus;
         this.isAccordion = true;
@@ -565,6 +574,9 @@ class ClrAccordionPanel {
             this.accordionService.disablePanel(this.id, changes.disabled.currentValue);
         }
     }
+    /**
+     * Toggles this panel open or closed.
+     */
     togglePanel() {
         this.accordionService.togglePanel(this.id);
     }
@@ -638,6 +650,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class ClrAccordion {
     constructor(accordionService) {
         this.accordionService = accordionService;
+        /**
+         * Whether the accordion supports multiple panels opened at the same time.
+         */
         this.multiPanel = false;
         this.subscriptions = [];
     }
@@ -19834,11 +19849,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrAlert {
-    constructor(iconService, cdr, multiAlertService, commonStrings) {
+    constructor(iconService, cdr, multiAlertService, commonStrings, renderer, hostElement) {
         this.iconService = iconService;
         this.cdr = cdr;
         this.multiAlertService = multiAlertService;
         this.commonStrings = commonStrings;
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.isLight = false;
         this.isSmall = false;
         this.closable = true;
@@ -19874,6 +19891,13 @@ class ClrAlert {
     set hidden(value) {
         if (value !== this._hidden) {
             this._hidden = value;
+            // CDE-1249 @HostBinding('class.alert-hidden') decoration will raise error in console https://angular.io/errors/NG0100
+            if (this._hidden) {
+                this.renderer.addClass(this.hostElement.nativeElement, 'alert-hidden');
+            }
+            else {
+                this.renderer.removeClass(this.hostElement.nativeElement, 'alert-hidden');
+            }
             this.cdr.detectChanges();
         }
     }
@@ -19906,14 +19930,14 @@ class ClrAlert {
         this._closedChanged.emit(true);
     }
 }
-ClrAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlert, selector: "clr-alert", inputs: { isLight: ["clrAlertLightweight", "isLight"], isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"], closed: ["clrAlertClosed", "closed"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, host: { properties: { "class.alert-hidden": "this.hidden" } }, 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-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLight\"\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", 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" }] });
+ClrAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: ClrCommonStringsService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlert, selector: "clr-alert", inputs: { isLight: ["clrAlertLightweight", "isLight"], isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"], closed: ["clrAlertClosed", "closed"] }, 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-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLight\"\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", 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlert, decorators: [{
             type: Component,
             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-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLight\"\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" }]
         }], ctorParameters: function () { return [{ type: AlertIconAndTypesService }, { type: i0.ChangeDetectorRef }, { type: MultiAlertService, decorators: [{
                     type: Optional
-                }] }, { type: ClrCommonStringsService }]; }, propDecorators: { isLight: [{
+                }] }, { type: ClrCommonStringsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { isLight: [{
                 type: Input,
                 args: ['clrAlertLightweight']
             }], isSmall: [{
@@ -19939,9 +19963,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], closed: [{
                 type: Input,
                 args: ['clrAlertClosed']
-            }], hidden: [{
-                type: HostBinding,
-                args: ['class.alert-hidden']
             }] } });
 
 /*