@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
158 lines (156 loc) • 5.79 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { getSupportedLocale } from "../../globals/js/utils/getSupportedLocale.js";
import { dateTimeLocaleContext } from "./date-time-context.js";
import notification_default$1 from "./notification.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import '@carbon/web-components/es-custom/components/button/index.js';
import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
import { selectorTabbable } from "@carbon/web-components/es/globals/settings.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import Close from "@carbon/icons/es/close/16";
import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16";
import { consume } from "@lit/context";
import { dateTimeFormat } from "@carbon/utilities";
import ErrorFilled16 from "@carbon/icons/es/error--filled/16";
import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16";
import InformationSquareFilled16 from "@carbon/icons/es/information--square--filled/16";
//#region src/components/notification-panel/notification.ts
/**
* @license
*
* Copyright IBM Corp. 2023, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const blockClass = `c4p--notifications-panel__notification`;
const DefaultLocale = "en-US";
const dateTimeStyle = "long";
/**
* Notification.
* @element c4p-notification
* @slot title - The Title for the notification.
* @slot description - The description for the notification.
* @csspart dialog The dialog.
* The custom event is fired when a notification is clicked or when the Enter key is pressed on it.
* @fires c4p-notification-dismiss - The custom event is fired when the notification is closed by a user gesture.
*/
let CDSNotification = class CDSNotification extends HostListenerMixin(LitElement) {
constructor(..._args) {
super(..._args);
this.dateTimeLocale = void 0;
this._handleKeyDown = (e) => {
if (e.key === "Enter" || e.key === " ") this.click();
};
}
connectedCallback() {
super.connectedCallback();
if (!this.hasAttribute("role")) this.setAttribute("role", "button");
if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
this.addEventListener("keydown", this._handleKeyDown);
}
render() {
const { type, timestamp, dateTimeLocale, _dismissSingleNotification: dismissSingleNotification, _fetchIcon: fetchIcon } = this;
const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
return html`
${fetchIcon(type)}
<div class="${blockClass}-content">
<p class="${blockClass}-time-label">
${dateTimeFormat.relative.format(timestamp, {
locale: supportedLocale,
style: dateTimeStyle
})}
</p>
<slot name="title"></slot>
<div class="${blockClass}-description">
<slot name="description"></slot>
</div>
</div>
<cds-custom-button
tooltip-text=""
align="left"
kind="ghost"
size="sm"
class="${blockClass}__dismiss-single-button"
@click=${dismissSingleNotification}
>
${iconLoader(Close, { slot: "icon" })}
</cds-custom-button>
`;
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("keydown", this._handleKeyDown);
}
/**
* Handles user-initiated dismiss request of the Notification.
*
* @param event The event that triggered the click.
*/
_dismissSingleNotification(event) {
const triggeredBy = event.target;
event.preventDefault();
event.stopPropagation();
const init = {
bubbles: true,
cancelable: true,
composed: true,
detail: { triggeredBy }
};
this.dispatchEvent(new CustomEvent(this.constructor.notificationDismiss, init));
}
_fetchIcon(type) {
let icon;
switch (type) {
case "error":
icon = iconLoader(ErrorFilled16, { class: `${blockClass}-status-icon ${blockClass}-status-icon-error` });
break;
case "success":
icon = iconLoader(CheckmarkFilled16, { class: `${blockClass}-status-icon ${blockClass}-status-icon-success` });
break;
case "warning":
icon = iconLoader(WarningAltFilled16, { class: `${blockClass}-status-icon ${blockClass}-status-icon-warning` });
break;
case "informational":
icon = iconLoader(InformationSquareFilled16, { class: `${blockClass}-status-icon ${blockClass}-status-icon-informational` });
break;
default: icon = null;
}
return icon;
}
/**
* A selector selecting tabbable nodes.
*/
static get selectorTabbable() {
return selectorTabbable;
}
/**
* The custom event is fired when the notification is closed by a user gesture.
*/
static get notificationDismiss() {
return `c4p-notification-dismiss`;
}
static {
this.styles = notification_default$1;
}
};
__decorate([property({ reflect: true })], CDSNotification.prototype, "type", void 0);
__decorate([property()], CDSNotification.prototype, "timestamp", void 0);
__decorate([consume({
context: dateTimeLocaleContext,
subscribe: true
})], CDSNotification.prototype, "dateTimeLocale", void 0);
CDSNotification = __decorate([carbonElement(`c4p-notification`)], CDSNotification);
var notification_default = CDSNotification;
//#endregion
export { notification_default as default };
//# sourceMappingURL=notification.js.map