carbon-components-angular
Version:
Next generation components
968 lines (950 loc) • 49 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, HostBinding, Injectable, EventEmitter, Component, Output, Input, NgModule } from '@angular/core';
import { isObservable, of } from 'rxjs';
import * as i2 from 'carbon-components-angular/i18n';
import { I18nModule } from 'carbon-components-angular/i18n';
import * as i3 from 'carbon-components-angular/button';
import { ButtonModule } from 'carbon-components-angular/button';
import * as i3$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from 'carbon-components-angular/link';
import { LinkModule } from 'carbon-components-angular/link';
import * as i4 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
import { ExperimentalModule } from 'carbon-components-angular/experimental';
class ActionableButton {
constructor() {
this.actionableButton = true;
this.type = "button";
}
}
ActionableButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ActionableButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ActionableButton, selector: "[cdsActionableButton], [ibmActionableButton]", host: { properties: { "class.cds--actionable-notification__action-button": "this.actionableButton", "attr.type": "this.type" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableButton, decorators: [{
type: Directive,
args: [{
selector: "[cdsActionableButton], [ibmActionableButton]"
}]
}], propDecorators: { actionableButton: [{
type: HostBinding,
args: ["class.cds--actionable-notification__action-button"]
}], type: [{
type: HostBinding,
args: ["attr.type"]
}] } });
class ActionableSubtitle {
constructor() {
this.baseClass = true;
}
}
ActionableSubtitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ActionableSubtitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ActionableSubtitle, selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]", host: { properties: { "class.cds--actionable-notification__subtitle": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableSubtitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--actionable-notification__subtitle"]
}] } });
class ActionableTitle {
constructor() {
this.baseClass = true;
}
}
ActionableTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ActionableTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ActionableTitle, selector: "[cdsActionableTitle], [ibmActionableTitle]", host: { properties: { "class.cds--actionable-notification__title": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableTitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsActionableTitle], [ibmActionableTitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--actionable-notification__title"]
}] } });
class NotificationDisplayService {
constructor(applicationRef) {
this.applicationRef = applicationRef;
}
/**
* Programatically closes notification based on `notificationRef`. *
*/
close(notificationRef) {
if (notificationRef.hostView) {
setTimeout(() => {
this.applicationRef.detachView(notificationRef.hostView);
notificationRef.destroy();
}, 200);
}
}
}
NotificationDisplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationDisplayService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
NotificationDisplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationDisplayService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationDisplayService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.ApplicationRef }]; } });
/**
* Base class for `Notification`, `ActionableNotification`, & `Toast`
* consisting of common functionality
*
* Get started with importing the module:
*
* ```typescript
* import { NotificationModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-notification--inline-notification)
*/
class BaseNotification {
constructor(notificationDisplayService, i18n) {
this.notificationDisplayService = notificationDisplayService;
this.i18n = i18n;
/**
* Emits on close.
*/
this.close = new EventEmitter();
// Get icon name(value) for service based on the notification type (key)
this.iconDictionary = {
"error": "error--filled",
"info": "information--filled",
"info-square": "information--square--filled",
"success": "checkmark--filled",
"warning": "warning--filled",
"warning-alt": "warning--alt--filled"
};
this.defaultNotificationObj = {
title: "",
message: "",
type: "info",
showClose: true,
closeLabel: this.i18n.get("NOTIFICATION.CLOSE_BUTTON"),
role: "status"
};
this._notificationObj = Object.assign({}, this.defaultNotificationObj);
}
/**
* Set role attribute for component
* `Status` is default for inline-notification & toast component
* `alertdialog` is default for actionable-notification
*/
get roleAttr() {
return this._notificationObj.role;
}
/**
* Emits close event.
*/
onClose() {
this.close.emit();
}
onClick(action, event) {
if (!action.click) {
return;
}
if (isObservable(action.click)) {
action.click.next({ event, action });
}
else {
action.click({ event, action });
}
}
destroy() {
this.notificationDisplayService.close(this);
}
}
BaseNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseNotification, deps: [{ token: NotificationDisplayService }, { token: i2.I18n }], target: i0.ɵɵFactoryTarget.Component });
BaseNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BaseNotification, selector: "ng-component", outputs: { close: "close" }, host: { properties: { "attr.role": "this.roleAttr" } }, ngImport: i0, template: "", isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseNotification, decorators: [{
type: Component,
args: [{
template: ""
}]
}], ctorParameters: function () { return [{ type: NotificationDisplayService }, { type: i2.I18n }]; }, propDecorators: { roleAttr: [{
type: HostBinding,
args: ["attr.role"]
}], close: [{
type: Output
}] } });
/**
* Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.
*
* [See demo](../../?path=/story/components-notification--actionable-notification)
*/
class ActionableNotification extends BaseNotification {
constructor(notificationDisplayService, i18n) {
super(notificationDisplayService, i18n);
this.notificationDisplayService = notificationDisplayService;
this.i18n = i18n;
this.notificationID = `notification-${ActionableNotification.notificationCount++}`;
this.notificationClass = true;
/**
* Set default variant & role, alternatives can be provided through notificationObj property
*/
this.defaultNotificationObj = {
...this.defaultNotificationObj,
variant: "inline",
role: "alertdialog"
};
}
/**
* Can have `type`, `title`, and `message` members.
*
* `type` can be one of `"error"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"success"`
*
* `message` is the message to display
*/
get notificationObj() {
return this._notificationObj;
}
set notificationObj(obj) {
if (obj.closeLabel && !isObservable(obj.closeLabel)) {
obj.closeLabel = of(obj.closeLabel);
}
this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
}
get toastVariant() { return this.notificationObj.variant === "toast"; }
get isError() { return this.notificationObj.type === "error"; }
get isInfo() { return this.notificationObj.type === "info"; }
get isInfoSquare() { return this.notificationObj.type === "info-square"; }
get isSuccess() { return this.notificationObj.type === "success"; }
get isWarning() { return this.notificationObj.type === "warning"; }
get isWarningAlt() { return this.notificationObj.type === "warning-alt"; }
get isLowContrast() { return this.notificationObj.lowContrast; }
get isCloseHidden() { return !this._notificationObj.showClose; }
}
ActionableNotification.notificationCount = 0;
ActionableNotification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableNotification, deps: [{ token: NotificationDisplayService }, { token: i2.I18n }], target: i0.ɵɵFactoryTarget.Component });
ActionableNotification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActionableNotification, selector: "cds-actionable-notification, ibm-actionable-notification", inputs: { notificationObj: "notificationObj" }, host: { properties: { "attr.id": "this.notificationID", "class.cds--actionable-notification": "this.notificationClass", "class.cds--actionable-notification--toast": "this.toastVariant", "class.cds--actionable-notification--error": "this.isError", "class.cds--actionable-notification--info": "this.isInfo", "class.cds--actionable-notification--info-square": "this.isInfoSquare", "class.cds--actionable-notification--success": "this.isSuccess", "class.cds--actionable-notification--warning": "this.isWarning", "class.cds--actionable-notification--warning-alt": "this.isWarningAlt", "class.cds--actionable-notification--low-contrast": "this.isLowContrast", "class.cds--actionable-notification--hide-close-button": "this.isCloseHidden" } }, usesInheritance: true, ngImport: i0, template: `
<div class="cds--actionable-notification__details">
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
[ngClass]="{
'cds--inline-notification__icon': notificationObj.variant === 'inline',
'cds--toast-notification__icon': notificationObj.variant === 'toast'
}"
class="cds--actionable-notification__icon">
</svg>
<div class="cds--actionable-notification__text-wrapper">
<div class="cds--actionable-notification__content">
<div *ngIf="!notificationObj.template" cdsActionableTitle [innerHTML]="notificationObj.title"></div>
<div *ngIf="!notificationObj.template" cdsActionableSubtitle>
<span [innerHTML]="notificationObj.message"></span>
<ng-container *ngFor="let link of notificationObj.links">
<a cdsLink [href]="link.href">{{link.text}}</a>
</ng-container>
</div>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container>
</div>
</div>
</div>
<ng-container *ngIf="!notificationObj.actionsTemplate">
<button
*ngFor="let action of notificationObj.actions"
(click)="onClick(action, $event)"
[cdsButton]="notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'"
size="sm"
cdsActionableButton>
{{action.text}}
</button>
</ng-container>
<ng-container *ngTemplateOutlet="notificationObj.actionsTemplate; context: { $implicit: notificationObj }"></ng-container>
<button
*ngIf="!isCloseHidden"
(click)="onClose()"
class="cds--actionable-notification__close-button"
[attr.aria-label]="notificationObj.closeLabel | async"
type="button">
<svg cdsIcon="close" size="16" class="cds--actionable-notification__close-icon"></svg>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: ActionableButton, selector: "[cdsActionableButton], [ibmActionableButton]" }, { kind: "directive", type: ActionableTitle, selector: "[cdsActionableTitle], [ibmActionableTitle]" }, { kind: "directive", type: ActionableSubtitle, selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActionableNotification, decorators: [{
type: Component,
args: [{
selector: "cds-actionable-notification, ibm-actionable-notification",
template: `
<div class="cds--actionable-notification__details">
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
[ngClass]="{
'cds--inline-notification__icon': notificationObj.variant === 'inline',
'cds--toast-notification__icon': notificationObj.variant === 'toast'
}"
class="cds--actionable-notification__icon">
</svg>
<div class="cds--actionable-notification__text-wrapper">
<div class="cds--actionable-notification__content">
<div *ngIf="!notificationObj.template" cdsActionableTitle [innerHTML]="notificationObj.title"></div>
<div *ngIf="!notificationObj.template" cdsActionableSubtitle>
<span [innerHTML]="notificationObj.message"></span>
<ng-container *ngFor="let link of notificationObj.links">
<a cdsLink [href]="link.href">{{link.text}}</a>
</ng-container>
</div>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container>
</div>
</div>
</div>
<ng-container *ngIf="!notificationObj.actionsTemplate">
<button
*ngFor="let action of notificationObj.actions"
(click)="onClick(action, $event)"
[cdsButton]="notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'"
size="sm"
cdsActionableButton>
{{action.text}}
</button>
</ng-container>
<ng-container *ngTemplateOutlet="notificationObj.actionsTemplate; context: { $implicit: notificationObj }"></ng-container>
<button
*ngIf="!isCloseHidden"
(click)="onClose()"
class="cds--actionable-notification__close-button"
[attr.aria-label]="notificationObj.closeLabel | async"
type="button">
<svg cdsIcon="close" size="16" class="cds--actionable-notification__close-icon"></svg>
</button>
`
}]
}], ctorParameters: function () { return [{ type: NotificationDisplayService }, { type: i2.I18n }]; }, propDecorators: { notificationObj: [{
type: Input
}], notificationID: [{
type: HostBinding,
args: ["attr.id"]
}], notificationClass: [{
type: HostBinding,
args: ["class.cds--actionable-notification"]
}], toastVariant: [{
type: HostBinding,
args: ["class.cds--actionable-notification--toast"]
}], isError: [{
type: HostBinding,
args: ["class.cds--actionable-notification--error"]
}], isInfo: [{
type: HostBinding,
args: ["class.cds--actionable-notification--info"]
}], isInfoSquare: [{
type: HostBinding,
args: ["class.cds--actionable-notification--info-square"]
}], isSuccess: [{
type: HostBinding,
args: ["class.cds--actionable-notification--success"]
}], isWarning: [{
type: HostBinding,
args: ["class.cds--actionable-notification--warning"]
}], isWarningAlt: [{
type: HostBinding,
args: ["class.cds--actionable-notification--warning-alt"]
}], isLowContrast: [{
type: HostBinding,
args: ["class.cds--actionable-notification--low-contrast"]
}], isCloseHidden: [{
type: HostBinding,
args: ["class.cds--actionable-notification--hide-close-button"]
}] } });
class NotificationSubtitle {
constructor() {
this.baseClass = true;
}
}
NotificationSubtitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
NotificationSubtitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NotificationSubtitle, selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]", host: { properties: { "class.cds--inline-notification__subtitle": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationSubtitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--inline-notification__subtitle"]
}] } });
class NotificationTitle {
constructor() {
this.baseClass = true;
}
}
NotificationTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
NotificationTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NotificationTitle, selector: "[cdsNotificationTitle], [ibmNotificationTitle]", host: { properties: { "class.cds--inline-notification__title": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationTitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsNotificationTitle], [ibmNotificationTitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--inline-notification__title"]
}] } });
/**
* Notification messages are displayed toward the top of the UI and do not interrupt user’s work.
*
* [See demo](../../?path=/story/components-notification--basic)
*/
class Notification extends BaseNotification {
constructor(notificationDisplayService, i18n) {
super(notificationDisplayService, i18n);
this.notificationDisplayService = notificationDisplayService;
this.i18n = i18n;
this.notificationID = `notification-${Notification.notificationCount++}`;
this.notificationClass = true;
}
/**
* Can have `type`, `title`, and `message` members.
*
* `type` can be one of `"error"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"success"`
*
* `message` is the message to display
*/
get notificationObj() {
return this._notificationObj;
}
set notificationObj(obj) {
if (obj.closeLabel && !isObservable(obj.closeLabel)) {
obj.closeLabel = of(obj.closeLabel);
}
this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
}
get isError() { return this.notificationObj.type === "error"; }
get isInfo() { return this.notificationObj.type === "info"; }
get isInfoSquare() { return this.notificationObj.type === "info-square"; }
get isSuccess() { return this.notificationObj.type === "success"; }
get isWarning() { return this.notificationObj.type === "warning"; }
get isWarningAlt() { return this.notificationObj.type === "warning-alt"; }
get isLowContrast() { return this.notificationObj.lowContrast; }
get isCloseHidden() { return !this.notificationObj.showClose; }
}
Notification.notificationCount = 0;
Notification.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Notification, deps: [{ token: NotificationDisplayService }, { token: i2.I18n }], target: i0.ɵɵFactoryTarget.Component });
Notification.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: { notificationObj: "notificationObj" }, host: { properties: { "attr.id": "this.notificationID", "class.cds--inline-notification": "this.notificationClass", "class.cds--inline-notification--error": "this.isError", "class.cds--inline-notification--info": "this.isInfo", "class.cds--inline-notification--info-square": "this.isInfoSquare", "class.cds--inline-notification--success": "this.isSuccess", "class.cds--inline-notification--warning": "this.isWarning", "class.cds--inline-notification--warning-alt": "this.isWarningAlt", "class.cds--inline-notification--low-contrast": "this.isLowContrast", "class.cds--inline-notification--hide-close-button": "this.isCloseHidden" } }, usesInheritance: true, ngImport: i0, template: `
<div class="cds--inline-notification__details">
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
class="cds--inline-notification__icon">
</svg>
<div class="cds--inline-notification__text-wrapper">
<div *ngIf="!notificationObj.template" cdsNotificationTitle [innerHTML]="notificationObj.title"></div>
<div *ngIf="!notificationObj.template" cdsNotificationSubtitle>
<span [innerHTML]="notificationObj.message"></span>
</div>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj}"></ng-container>
</div>
</div>
<button
*ngIf="!isCloseHidden"
(click)="onClose()"
class="cds--inline-notification__close-button"
[attr.aria-label]="notificationObj.closeLabel | async"
type="button">
<svg cdsIcon="close" size="16" class="cds--inline-notification__close-icon"></svg>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: NotificationTitle, selector: "[cdsNotificationTitle], [ibmNotificationTitle]" }, { kind: "directive", type: NotificationSubtitle, selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Notification, decorators: [{
type: Component,
args: [{
selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification",
template: `
<div class="cds--inline-notification__details">
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
class="cds--inline-notification__icon">
</svg>
<div class="cds--inline-notification__text-wrapper">
<div *ngIf="!notificationObj.template" cdsNotificationTitle [innerHTML]="notificationObj.title"></div>
<div *ngIf="!notificationObj.template" cdsNotificationSubtitle>
<span [innerHTML]="notificationObj.message"></span>
</div>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj}"></ng-container>
</div>
</div>
<button
*ngIf="!isCloseHidden"
(click)="onClose()"
class="cds--inline-notification__close-button"
[attr.aria-label]="notificationObj.closeLabel | async"
type="button">
<svg cdsIcon="close" size="16" class="cds--inline-notification__close-icon"></svg>
</button>
`
}]
}], ctorParameters: function () { return [{ type: NotificationDisplayService }, { type: i2.I18n }]; }, propDecorators: { notificationObj: [{
type: Input
}], notificationID: [{
type: HostBinding,
args: ["attr.id"]
}], notificationClass: [{
type: HostBinding,
args: ["class.cds--inline-notification"]
}], isError: [{
type: HostBinding,
args: ["class.cds--inline-notification--error"]
}], isInfo: [{
type: HostBinding,
args: ["class.cds--inline-notification--info"]
}], isInfoSquare: [{
type: HostBinding,
args: ["class.cds--inline-notification--info-square"]
}], isSuccess: [{
type: HostBinding,
args: ["class.cds--inline-notification--success"]
}], isWarning: [{
type: HostBinding,
args: ["class.cds--inline-notification--warning"]
}], isWarningAlt: [{
type: HostBinding,
args: ["class.cds--inline-notification--warning-alt"]
}], isLowContrast: [{
type: HostBinding,
args: ["class.cds--inline-notification--low-contrast"]
}], isCloseHidden: [{
type: HostBinding,
args: ["class.cds--inline-notification--hide-close-button"]
}] } });
class ToastTitle {
constructor() {
this.baseClass = true;
}
}
ToastTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToastTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToastTitle, selector: "[cdsToastTitle], [ibmToastTitle]", host: { properties: { "class.cds--toast-notification__title": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastTitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsToastTitle], [ibmToastTitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--toast-notification__title"]
}] } });
class ToastSubtitle {
constructor() {
this.baseClass = true;
}
}
ToastSubtitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToastSubtitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToastSubtitle, selector: "[cdsToastSubtitle], [ibmToastSubtitle]", host: { properties: { "class.cds--toast-notification__subtitle": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastSubtitle, decorators: [{
type: Directive,
args: [{
selector: "[cdsToastSubtitle], [ibmToastSubtitle]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--toast-notification__subtitle"]
}] } });
class ToastCaption {
constructor() {
this.baseClass = true;
}
}
ToastCaption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToastCaption.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToastCaption, selector: "[cdsToastCaption], [ibmToastCaption]", host: { properties: { "class.cds--toast-notification__caption": "this.baseClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastCaption, decorators: [{
type: Directive,
args: [{
selector: "[cdsToastCaption], [ibmToastCaption]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--toast-notification__caption"]
}] } });
/**
* Toast messages are displayed toward the top of the UI and do not interrupt user’s work.
*
* [See demo](../../?path=/story/components-notification--toast)
*/
class Toast extends BaseNotification {
constructor(notificationDisplayService, i18n) {
super(notificationDisplayService, i18n);
this.notificationDisplayService = notificationDisplayService;
this.i18n = i18n;
this.toastID = `toast-${Toast.toastCount++}`;
this.toastClass = true;
}
/**
* Can have `type`, `title`, `subtitle`, and `caption` members.
*
* `type` can be one of `"error"`, `"info"`, `"info-square"`, `"warning"`, `"warning-alt"`, or `"success"`
*/
set notificationObj(obj) {
if (obj.closeLabel && !isObservable(obj.closeLabel)) {
obj.closeLabel = of(obj.closeLabel);
}
this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
}
get notificationObj() {
return this._notificationObj;
}
get isError() { return this.notificationObj.type === "error"; }
get isInfo() { return this.notificationObj.type === "info"; }
get isInfoSquare() { return this.notificationObj.type === "info-square"; }
get isSuccess() { return this.notificationObj.type === "success"; }
get isWarning() { return this.notificationObj.type === "warning"; }
get isWarningAlt() { return this.notificationObj.type === "warning-alt"; }
get isLowContrast() { return this.notificationObj.lowContrast; }
get isCloseHidden() { return !this.notificationObj.showClose; }
ngOnInit() {
if (!this.notificationObj.closeLabel) {
this.notificationObj.closeLabel = this.i18n.get().NOTIFICATION.CLOSE_BUTTON;
}
}
}
Toast.toastCount = 0;
Toast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toast, deps: [{ token: NotificationDisplayService }, { token: i2.I18n }], target: i0.ɵɵFactoryTarget.Component });
Toast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toast, selector: "cds-toast, ibm-toast", inputs: { notificationObj: "notificationObj" }, host: { properties: { "attr.id": "this.toastID", "class.cds--toast-notification": "this.toastClass", "class.cds--toast-notification--error": "this.isError", "class.cds--toast-notification--info": "this.isInfo", "class.cds--toast-notification--info-square": "this.isInfoSquare", "class.cds--toast-notification--success": "this.isSuccess", "class.cds--toast-notification--warning": "this.isWarning", "class.cds--toast-notification--warning-alt": "this.isWarningAlt", "class.cds--toast-notification--low-contrast": "this.isLowContrast", "class.cds--toast-notification--hide-close-button": "this.isCloseHidden" } }, usesInheritance: true, ngImport: i0, template: `
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
class="cds--toast-notification__icon">
</svg>
<div class="cds--toast-notification__details">
<h3 *ngIf="!notificationObj.template" cdsToastTitle [innerHTML]="notificationObj.title"></h3>
<div *ngIf="!notificationObj.template" cdsToastSubtitle>
<span [innerHTML]="notificationObj.subtitle"></span>
</div>
<p *ngIf="!notificationObj.template" cdsToastCaption [innerHTML]="notificationObj.caption"></p>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container>
</div>
<button
*ngIf="!isCloseHidden"
class="cds--toast-notification__close-button"
type="button"
[attr.aria-label]="notificationObj.closeLabel | async"
(click)="onClose()">
<svg cdsIcon="close" size="16" class="cds--toast-notification__close-icon"></svg>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: ToastTitle, selector: "[cdsToastTitle], [ibmToastTitle]" }, { kind: "directive", type: ToastSubtitle, selector: "[cdsToastSubtitle], [ibmToastSubtitle]" }, { kind: "directive", type: ToastCaption, selector: "[cdsToastCaption], [ibmToastCaption]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toast, decorators: [{
type: Component,
args: [{
selector: "cds-toast, ibm-toast",
template: `
<svg
[cdsIcon]="iconDictionary[notificationObj.type]"
size="20"
*ngIf="notificationObj.type"
class="cds--toast-notification__icon">
</svg>
<div class="cds--toast-notification__details">
<h3 *ngIf="!notificationObj.template" cdsToastTitle [innerHTML]="notificationObj.title"></h3>
<div *ngIf="!notificationObj.template" cdsToastSubtitle>
<span [innerHTML]="notificationObj.subtitle"></span>
</div>
<p *ngIf="!notificationObj.template" cdsToastCaption [innerHTML]="notificationObj.caption"></p>
<ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container>
</div>
<button
*ngIf="!isCloseHidden"
class="cds--toast-notification__close-button"
type="button"
[attr.aria-label]="notificationObj.closeLabel | async"
(click)="onClose()">
<svg cdsIcon="close" size="16" class="cds--toast-notification__close-icon"></svg>
</button>
`
}]
}], ctorParameters: function () { return [{ type: NotificationDisplayService }, { type: i2.I18n }]; }, propDecorators: { notificationObj: [{
type: Input
}], toastID: [{
type: HostBinding,
args: ["attr.id"]
}], toastClass: [{
type: HostBinding,
args: ["class.cds--toast-notification"]
}], isError: [{
type: HostBinding,
args: ["class.cds--toast-notification--error"]
}], isInfo: [{
type: HostBinding,
args: ["class.cds--toast-notification--info"]
}], isInfoSquare: [{
type: HostBinding,
args: ["class.cds--toast-notification--info-square"]
}], isSuccess: [{
type: HostBinding,
args: ["class.cds--toast-notification--success"]
}], isWarning: [{
type: HostBinding,
args: ["class.cds--toast-notification--warning"]
}], isWarningAlt: [{
type: HostBinding,
args: ["class.cds--toast-notification--warning-alt"]
}], isLowContrast: [{
type: HostBinding,
args: ["class.cds--toast-notification--low-contrast"]
}], isCloseHidden: [{
type: HostBinding,
args: ["class.cds--toast-notification--hide-close-button"]
}] } });
/**
* Provides a way to use the notification component.
*
* Notifications are displayed toward the top of the UI and do not interrupt the user’s work.
*/
class NotificationService {
/**
* Constructs Notification Service
*/
constructor(injector, viewContainer, ngZone) {
this.injector = injector;
this.viewContainer = viewContainer;
this.ngZone = ngZone;
/**
* An array containing `ComponentRef`s to all the notifications this service instance
* is responsible for.
*
*/
this.notificationRefs = new Array();
this.onClose = new EventEmitter();
}
/**
* Shows the notification based on the `notificationObj`.
*
* @param notificationObj Can have `type`, `message`, `target`, `duration` and `smart` members.
*
* **Members:**
*
* * `type` can be one of `"info"`, `"warning"`, `"danger"`, `"success"`
* * `message` is message for notification to display
* * `target` is css selector defining an element to append notification to. If not provided,
* `showNotification()` creates a place for the notification in `body`
* * `duration` is number of ms to close the notification after. If used in combination with `smart`,
* it's added to the calculated timeout
* * `smart`, set to `true` if you want to use smart notification.
*
* **Example:**
* ```typescript
* // Info notification, saying "Sample message." added to the element with id notification-container
* // uses smart timeout with added duration of 1 second.
* {
* type: "info",
* message: "Sample message.",
* target: "#notification-container",
* duration: 1000,
* smart: true
* }
* ```
*
* @param [notificationComp=Notification] If provided, used to resolve component factory
*/
showNotification(notificationObj, notificationComp = Notification) {
const notificationRef = this.viewContainer.createComponent(notificationComp);
notificationRef.instance.notificationObj = notificationObj;
this.notificationRefs.push(notificationRef);
this.onClose = notificationRef.instance.close;
if (notificationObj.target) {
document.querySelector(notificationObj.target).appendChild(notificationRef.location.nativeElement);
}
else {
let body = document.querySelector("body");
// get or create a container for alert list
let notificationClassName = "notification-overlay";
let notificationList = body.querySelector(`.${notificationClassName}`);
if (!notificationList) {
notificationList = document.createElement("div");
notificationList.className = notificationClassName;
body.appendChild(notificationList);
}
// add the notification to the top of the list
if (notificationList.firstChild) {
notificationList.insertBefore(notificationRef.location.nativeElement, notificationList.firstChild);
}
else {
notificationList.appendChild(notificationRef.location.nativeElement);
}
}
if (notificationObj.duration && notificationObj.duration > 0) {
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.ngZone.run(() => {
this.close(notificationRef);
});
}, notificationObj.duration);
});
}
if (notificationObj.smart) {
this.ngZone.runOutsideAngular(() => {
// let it disappear after calculated timeout
setTimeout(() => {
this.ngZone.run(() => {
this.close(notificationRef);
});
}, this.getSmartTimeout(notificationObj));
});
}
this.onClose.subscribe(() => {
this.close(notificationRef);
});
notificationRef.instance.componentRef = notificationRef;
return notificationRef.instance;
}
showToast(notificationObj, notificationComp = Toast) {
return this.showNotification(notificationObj, notificationComp);
}
showActionable(notificationObj, notificationComp = ActionableNotification) {
return this.showNotification(notificationObj, notificationComp);
}
/**
* Programatically closes notification based on `notificationRef`.
*
* @param notificationRef `ComponentRef` of a notification or `Notification` component you wish to close
*/
close(notificationRef) {
if (notificationRef) {
if (notificationRef instanceof Notification) {
this.close(notificationRef.componentRef);
}
else {
notificationRef.destroy();
const index = this.notificationRefs.indexOf(notificationRef);
if (index !== -1) {
this.notificationRefs.splice(index, 1);
}
}
}
}
/**
* Calculates the amount of time user needs to read the message in the notification.
*
* @param notificationObj Same object used to instantiate notification.
*
* In addition to `type` and `message` members, use `duration` member to add
* some extra time (in ms) to timeout if you need to.
* @returns calculated timeout (in ms) for smart notification
*/
getSmartTimeout(notificationObj) {
// calculate timeout
let timeout = 600; // start with reaction time
// custom duration
timeout += notificationObj.duration || 0;
// message type
switch (notificationObj.type) {
case "info":
case "info-square":
case "success":
default: {
break;
}
case "danger": {
timeout += 3000;
break;
}
case "warning":
case "warning-alt": {
timeout += 1500;
break;
}
}
// message length
// average reader reads around 200 words per minute, or it takes them ~0.3s per word
// let's use 1.5 factor for below average speed readers and have 0.45s per word
let wordCount = notificationObj.message.trim().split(/\s+/).length;
timeout += wordCount * 450;
return timeout;
}
/**
* OnDestroy hook.
*
* Destroys all living notifications it is responsible for.
*
*/
ngOnDestroy() {
this.notificationRefs.forEach((ref) => {
ref.destroy();
});
}
}
NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationService, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i0.NgZone }]; } });
class NotificationModule {
}
NotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NotificationModule, declarations: [ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
BaseNotification,
Notification,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle], imports: [ButtonModule,
CommonModule,
I18nModule,
ExperimentalModule,
LinkModule,
IconModule], exports: [Notification,
ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle] });
NotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationModule, providers: [NotificationService, NotificationDisplayService], imports: [ButtonModule,
CommonModule,
I18nModule,
ExperimentalModule,
LinkModule,
IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
BaseNotification,
Notification,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle
],
exports: [
Notification,
ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle
],
imports: [
ButtonModule,
CommonModule,
I18nModule,
ExperimentalModule,
LinkModule,
IconModule
],
providers: [NotificationService, NotificationDisplayService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ActionableButton, ActionableNotification, ActionableSubtitle, ActionableTitle, BaseNotification, Notification, NotificationDisplayService, NotificationModule, NotificationService, NotificationSubtitle, NotificationTitle, Toast, ToastCaption, ToastSubtitle, ToastTitle };
//# sourceMappingURL=carbon-components-angular-notification.mjs.map