@clr/angular 17.12.2 → 18.0.0-beta.1

package/fesm2022/clr-angular-emphasis-alert.mjs

@@ -0,0 +1,624 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Input, Output, Optional, Component, Directive, ContentChildren, NgModule } from '@angular/core';
+import * as i1 from '@clr/angular/utils';
+import { Subject } from 'rxjs';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@clr/angular/icon';
+import { ClarityIcons, errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, windowCloseIcon, ClrIcon } from '@clr/angular/icon';
+import * as i3 from '@clr/angular/progress/spinner';
+import { ClrSpinnerModule } from '@clr/angular/progress/spinner';
+import { ClrDropdownModule } from '@clr/angular/popover/dropdown';
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// @TODO Make this an enum
+const ALERT_TYPES = ['info', 'warning', 'danger', 'success', 'neutral', 'unknown', 'loading'];
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class AlertIconAndTypesService {
+    constructor(commonStrings) {
+        this.commonStrings = commonStrings;
+        this.defaultIconShape = 'info-standard';
+        this._alertIconShape = '';
+        this._alertType = 'info';
+    }
+    get alertType() {
+        return this._alertType;
+    }
+    set alertType(val) {
+        if (ALERT_TYPES.indexOf(val) > -1) {
+            this._alertType = val;
+        }
+    }
+    get alertIconShape() {
+        if ('' === this._alertIconShape) {
+            return this.iconInfoFromType(this._alertType).shape;
+        }
+        return this._alertIconShape;
+    }
+    set alertIconShape(val) {
+        if (!val) {
+            this._alertIconShape = '';
+        }
+        else if (val !== this._alertIconShape) {
+            this._alertIconShape = val;
+        }
+    }
+    get alertIconTitle() {
+        return this.iconInfoFromType(this._alertType).title;
+    }
+    iconInfoFromType(type) {
+        const returnObj = { shape: '', cssClass: '', title: '' };
+        switch (type) {
+            case 'warning':
+                returnObj.shape = 'warning-standard';
+                returnObj.cssClass = 'alert-warning';
+                returnObj.title = this.commonStrings.keys.warning;
+                break;
+            case 'danger':
+                returnObj.shape = 'error-standard';
+                returnObj.cssClass = 'alert-danger';
+                returnObj.title = this.commonStrings.keys.danger;
+                break;
+            case 'success':
+                returnObj.shape = 'success-standard';
+                returnObj.cssClass = 'alert-success';
+                returnObj.title = this.commonStrings.keys.success;
+                break;
+            case 'neutral':
+                returnObj.shape = 'note';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.neutral;
+                break;
+            case 'unknown':
+                returnObj.shape = 'help';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.unknown;
+                break;
+            case 'loading':
+                returnObj.shape = 'loading';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.unknown;
+                break;
+            default:
+                returnObj.shape = this.defaultIconShape;
+                returnObj.cssClass = 'alert-info';
+                returnObj.title = this.commonStrings.keys.info;
+                break;
+        }
+        return returnObj;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AlertIconAndTypesService, deps: [{ token: i1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AlertIconAndTypesService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AlertIconAndTypesService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.ClrCommonStringsService }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class MultiAlertService {
+    constructor() {
+        this._change = new Subject();
+    }
+    /**
+     * The Observable that lets other classes subscribe to changes
+     */
+    get changes() {
+        return this._change.asObservable();
+    }
+    get current() {
+        return this._current;
+    }
+    set current(index) {
+        if (index !== this._current) {
+            this._current = index;
+            this._change.next(index);
+        }
+    }
+    get activeAlerts() {
+        return this.allAlerts && this.allAlerts.filter(alert => !alert._closed);
+    }
+    get currentAlert() {
+        return this.activeAlerts && this.activeAlerts[this.current];
+    }
+    set currentAlert(alert) {
+        this.current = this.activeAlerts.indexOf(alert);
+    }
+    get count() {
+        return (this.activeAlerts && this.activeAlerts.length) || 0;
+    }
+    manage(alerts) {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.allAlerts = alerts;
+        // After receiving alerts' QueryList,
+        // we are picking index 0 as current by default if a user hasn't any index
+        this.current = typeof this._current === 'number' ? this._current : 0;
+        // we have to also broadcast that initial index
+        this._change.next(this.current);
+        this.subscription = this.allAlerts.changes.subscribe(() => {
+            if (this.current >= this.allAlerts.length) {
+                this.current = Math.max(0, this.allAlerts.length - 1);
+            }
+        });
+    }
+    next() {
+        this._current = this.current === this.activeAlerts.length - 1 ? 0 : this.current + 1;
+        this._change.next(this._current);
+    }
+    previous() {
+        if (this.activeAlerts.length === 0) {
+            return;
+        }
+        this._current = this.current === 0 ? this.activeAlerts.length - 1 : this.current - 1;
+        this._change.next(this._current);
+    }
+    open() {
+        if (this.activeAlerts.length === 0) {
+            return;
+        }
+        if (!this.currentAlert) {
+            this._current = 0;
+        }
+        this._change.next(this._current);
+    }
+    close(isCurrentAlert) {
+        if (this.activeAlerts.length === 0) {
+            return;
+        }
+        if (isCurrentAlert) {
+            this._current = Math.max(0, this.current - 1);
+        }
+        this._change.next(this._current);
+    }
+    destroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MultiAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MultiAlertService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MultiAlertService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrAlert {
+    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.isSmall = false;
+        this.closable = true;
+        this.isAppLevel = false;
+        this.clrCloseButtonAriaLabel = this.commonStrings.keys.alertCloseButtonAriaLabel;
+        this._closedChanged = new EventEmitter(false);
+        this._closed = false;
+        this.subscriptions = [];
+        this._isLightweight = false;
+    }
+    get isLightweight() {
+        return this._isLightweight;
+    }
+    set isLightweight(val) {
+        this._isLightweight = val;
+        this.configAlertType(this._origAlertType);
+    }
+    get alertType() {
+        return this.iconService.alertType;
+    }
+    set alertType(val) {
+        this._origAlertType = val;
+        this.configAlertType(val);
+    }
+    set alertIconShape(value) {
+        this.iconService.alertIconShape = value;
+    }
+    set closed(value) {
+        if (value && !this._closed) {
+            this.close();
+        }
+        else if (!value && this._closed) {
+            this.open();
+        }
+    }
+    get alertClass() {
+        return this.iconService.iconInfoFromType(this.iconService.alertType).cssClass;
+    }
+    get hidden() {
+        return this._hidden;
+    }
+    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();
+        }
+    }
+    ngOnInit() {
+        if (this.multiAlertService) {
+            this.subscriptions.push(this.multiAlertService.changes.subscribe(() => {
+                this.hidden = this.multiAlertService.currentAlert !== this;
+            }));
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    configAlertType(val) {
+        this.iconService.alertType = val;
+    }
+    open() {
+        this._closed = false;
+        if (this.multiAlertService) {
+            this.multiAlertService.open();
+        }
+        this._closedChanged.emit(false);
+    }
+    close() {
+        if (!this.closable) {
+            return;
+        }
+        const isCurrentAlert = this.multiAlertService?.currentAlert === this;
+        this._closed = true;
+        if (this.multiAlertService?.activeAlerts) {
+            this.multiAlertService.close(isCurrentAlert);
+        }
+        this._closedChanged.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: i1.ClrCommonStringsService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrAlert, isStandalone: false, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", isLightweight: ["clrAlertLightweight", "isLightweight"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"], closed: ["clrAlertClosed", "closed"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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@if (!_closed) {\n<div\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLightweight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  @if (closable) {\n  <button type=\"button\" class=\"close\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"times\"></cds-icon>\n  </button>\n  }\n</div>\n}\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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@if (!_closed) {\n<div\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLightweight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  @if (closable) {\n  <button type=\"button\" class=\"close\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"times\"></cds-icon>\n  </button>\n  }\n</div>\n}\n" }]
+        }], ctorParameters: () => [{ type: AlertIconAndTypesService }, { type: i0.ChangeDetectorRef }, { type: MultiAlertService, decorators: [{
+                    type: Optional
+                }] }, { type: i1.ClrCommonStringsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { isSmall: [{
+                type: Input,
+                args: ['clrAlertSizeSmall']
+            }], closable: [{
+                type: Input,
+                args: ['clrAlertClosable']
+            }], isAppLevel: [{
+                type: Input,
+                args: ['clrAlertAppLevel']
+            }], clrCloseButtonAriaLabel: [{
+                type: Input
+            }], _closedChanged: [{
+                type: Output,
+                args: ['clrAlertClosedChange']
+            }], isLightweight: [{
+                type: Input,
+                args: ['clrAlertLightweight']
+            }], alertType: [{
+                type: Input,
+                args: ['clrAlertType']
+            }], alertIconShape: [{
+                type: Input,
+                args: ['clrAlertIcon']
+            }], closed: [{
+                type: Input,
+                args: ['clrAlertClosed']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrAlertItem {
+    constructor(iconService) {
+        this.iconService = iconService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertItem, deps: [{ token: AlertIconAndTypesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrAlertItem, isStandalone: false, selector: "clr-alert-item", host: { classAttribute: "alert-item" }, ngImport: i0, template: `
+    <div class="alert-icon-wrapper">
+      @if (iconService.alertIconShape === 'loading') {
+        <clr-spinner class="alert-spinner" clrInline></clr-spinner>
+      }
+      @if (iconService.alertIconShape !== 'loading') {
+        <cds-icon
+          class="alert-icon"
+          role="img"
+          [shape]="iconService.alertIconShape"
+          [attr.aria-label]="iconService.alertIconTitle"
+        ></cds-icon>
+      }
+    </div>
+    <ng-content></ng-content>
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-alert-item',
+                    template: `
+    <div class="alert-icon-wrapper">
+      @if (iconService.alertIconShape === 'loading') {
+        <clr-spinner class="alert-spinner" clrInline></clr-spinner>
+      }
+      @if (iconService.alertIconShape !== 'loading') {
+        <cds-icon
+          class="alert-icon"
+          role="img"
+          [shape]="iconService.alertIconShape"
+          [attr.aria-label]="iconService.alertIconTitle"
+        ></cds-icon>
+      }
+    </div>
+    <ng-content></ng-content>
+  `,
+                    host: { class: 'alert-item' },
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: AlertIconAndTypesService }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * @remark
+ * This directive is used only of selectin alert text.
+ */
+class ClrAlertText {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ClrAlertText, isStandalone: false, selector: ".alert-text", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.alert-text',
+                    standalone: false,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrAlertsPager {
+    constructor(multiAlertService, commonStrings) {
+        this.multiAlertService = multiAlertService;
+        this.commonStrings = commonStrings;
+        this.currentAlertChange = new EventEmitter(false);
+        this.currentAlertIndexChange = new EventEmitter();
+    }
+    /**
+     * Input/Output to support two way binding on current alert instance
+     */
+    get currentAlert() {
+        return this.multiAlertService.currentAlert;
+    }
+    set currentAlert(alert) {
+        if (alert) {
+            this.multiAlertService.currentAlert = alert;
+        }
+    }
+    /**
+     * Input/Output to support two way binding on current alert index
+     */
+    get currentAlertIndex() {
+        return this.multiAlertService.current;
+    }
+    set currentAlertIndex(index) {
+        this.multiAlertService.current = index;
+    }
+    get previousAlertAriaLabel() {
+        const CURRENT = this.currentAlertIndex + 1;
+        return this.commonStrings.parse(this.commonStrings.keys.alertPreviousAlertAriaLabel, {
+            CURRENT: (CURRENT === 1 ? this.multiAlertService.count : CURRENT - 1).toString(),
+            COUNT: this.multiAlertService.count.toString(),
+        });
+    }
+    get nextAlertAriaLabel() {
+        const CURRENT = this.currentAlertIndex + 1;
+        return this.commonStrings.parse(this.commonStrings.keys.alertNextAlertAriaLabel, {
+            CURRENT: (CURRENT === this.multiAlertService.count ? 1 : CURRENT + 1).toString(),
+            COUNT: this.multiAlertService.count.toString(),
+        });
+    }
+    ngOnInit() {
+        this.multiAlertServiceChanges = this.multiAlertService.changes.subscribe(index => {
+            this.currentAlertIndexChange.emit(index);
+            this.currentAlertChange.emit(this.multiAlertService.activeAlerts[index]);
+        });
+    }
+    ngOnDestroy() {
+        this.multiAlertServiceChanges.unsubscribe();
+    }
+    pageUp() {
+        this.multiAlertService.next();
+    }
+    pageDown() {
+        this.multiAlertService.previous();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertsPager, deps: [{ token: MultiAlertService }, { token: i1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ClrAlertsPager, isStandalone: false, 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-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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\" type=\"button\" (click)=\"pageDown()\" [attr.aria-label]=\"previousAlertAriaLabel\">\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n    </button>\n  </div>\n  <div class=\"alerts-pager-text\">{{multiAlertService.current+1}} / {{multiAlertService.count}}</div>\n  <div class=\"alerts-page-up\">\n    <button class=\"alerts-pager-button\" type=\"button\" (click)=\"pageUp()\" [attr.aria-label]=\"nextAlertAriaLabel\">\n      <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i5.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertsPager, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-alerts-pager', host: { '[class.alerts-pager]': 'true' }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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\" type=\"button\" (click)=\"pageDown()\" [attr.aria-label]=\"previousAlertAriaLabel\">\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.previous\"></cds-icon>\n    </button>\n  </div>\n  <div class=\"alerts-pager-text\">{{multiAlertService.current+1}} / {{multiAlertService.count}}</div>\n  <div class=\"alerts-page-up\">\n    <button class=\"alerts-pager-button\" type=\"button\" (click)=\"pageUp()\" [attr.aria-label]=\"nextAlertAriaLabel\">\n      <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.next\"></cds-icon>\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: MultiAlertService }, { type: i1.ClrCommonStringsService }], propDecorators: { currentAlertChange: [{
+                type: Output,
+                args: ['clrCurrentAlertChange']
+            }], currentAlertIndexChange: [{
+                type: Output,
+                args: ['clrCurrentAlertIndexChange']
+            }], currentAlert: [{
+                type: Input,
+                args: ['clrCurrentAlert']
+            }], currentAlertIndex: [{
+                type: Input,
+                args: ['clrCurrentAlertIndex']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrAlerts {
+    constructor(multiAlertService) {
+        this.multiAlertService = multiAlertService;
+        this.currentAlertChange = new EventEmitter(false);
+        this.currentAlertIndexChange = new EventEmitter(false);
+        this.subscriptions = [];
+    }
+    set allAlerts(value) {
+        this.multiAlertService.manage(value); // provide alerts
+    }
+    /**
+     * Input/Output to support two way binding on current alert index
+     */
+    set _inputCurrentIndex(index) {
+        if (Number.isInteger(index) && index >= 0) {
+            this.multiAlertService.current = index;
+        }
+    }
+    get currentAlertIndex() {
+        return this.multiAlertService.current;
+    }
+    set currentAlertIndex(index) {
+        this.multiAlertService.current = index;
+    }
+    /**
+     * Input/Output to support two way binding on current alert instance
+     */
+    get currentAlert() {
+        return this.multiAlertService.currentAlert;
+    }
+    set currentAlert(alert) {
+        if (alert) {
+            this.multiAlertService.currentAlert = alert;
+        }
+    }
+    /**
+     * Ensure we are only dealing with alerts that have not been closed yet
+     */
+    get alerts() {
+        return this.allAlerts.filter(alert => {
+            return alert.hidden === false;
+        });
+    }
+    get currentAlertType() {
+        if (this.multiAlertService.currentAlert) {
+            return this.multiAlertService.currentAlert.alertType;
+        }
+        return '';
+    }
+    ngAfterContentInit() {
+        this.subscriptions.push(this.multiAlertService.changes.subscribe(index => {
+            this.currentAlertIndexChange.next(index);
+            this.currentAlertChange.next(this.multiAlertService.currentAlert);
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.multiAlertService.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlerts, deps: [{ token: MultiAlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrAlerts, isStandalone: false, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertChange: "clrCurrentAlertChange", currentAlertIndexChange: "clrCurrentAlertIndexChange" }, 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'", "class.alert-neutral": "this.currentAlertType == 'neutral'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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<div class=\"alerts-wrapper\">\n  @if (multiAlertService.count > 1) {\n  <clr-alerts-pager [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n  }\n  <ng-content select=\"clr-alert\"></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlerts, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-alerts', providers: [MultiAlertService], host: {
+                        '[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'",
+                        '[class.alert-neutral]': "this.currentAlertType == 'neutral'",
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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<div class=\"alerts-wrapper\">\n  @if (multiAlertService.count > 1) {\n  <clr-alerts-pager [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n  }\n  <ng-content select=\"clr-alert\"></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: MultiAlertService }], propDecorators: { currentAlertChange: [{
+                type: Output,
+                args: ['clrCurrentAlertChange']
+            }], currentAlertIndexChange: [{
+                type: Output,
+                args: ['clrCurrentAlertIndexChange']
+            }], allAlerts: [{
+                type: ContentChildren,
+                args: [ClrAlert]
+            }], _inputCurrentIndex: [{
+                type: Input,
+                args: ['clrCurrentAlertIndex']
+            }], currentAlert: [{
+                type: Input,
+                args: ['clrCurrentAlert']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const CLR_ALERT_DIRECTIVES = [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText];
+class ClrAlertModule {
+    constructor() {
+        ClarityIcons.addIcons(errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, windowCloseIcon);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertModule, declarations: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText], imports: [CommonModule, ClrIcon, ClrDropdownModule, ClrSpinnerModule], exports: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertModule, imports: [CommonModule, ClrIcon, ClrDropdownModule, ClrSpinnerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClrIcon, ClrDropdownModule, ClrSpinnerModule],
+                    declarations: [CLR_ALERT_DIRECTIVES],
+                    exports: [CLR_ALERT_DIRECTIVES],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALERT_TYPES, CLR_ALERT_DIRECTIVES, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager };
+//# sourceMappingURL=clr-angular-emphasis-alert.mjs.map