@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
180 lines (176 loc) • 6.63 kB
JavaScript
/**
* Copyright IBM Corp. 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.
*/
import { __decorate } from 'tslib';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings.js';
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
import { dateTimeFormat as r } from '../../node_modules/@carbon/utilities/es/dateTimeFormat/index.js';
import '../../node_modules/@carbon/utilities/es/documentLang/documentLang.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import { consume } from '@lit/context';
import { dateTimeLocaleContext } from './date-time-context.js';
import styles from './notification.scss.js';
import '@carbon/web-components/es-custom/components/button/index.js';
import Close16 from '@carbon/icons/es/close/16';
import ErrorFilled16 from '@carbon/icons/es/error--filled/16';
import CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16';
import WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16';
import InformationSquareFilled16 from '@carbon/icons/es/information--square--filled/16';
import { getSupportedLocale } from '../../globals/js/utils/getSupportedLocale.js';
import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
/**
* @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 = `${prefix}--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() {
super(...arguments);
this.dateTimeLocale = undefined;
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);
const icon = fetchIcon(type);
return html `
${icon}
<div class="${blockClass}-content">
<p class="${blockClass}-time-label">
${r.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(Close16, { 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 `${prefix}-notification-dismiss`;
}
};
CDSNotification.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
__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(`${prefix}-notification`)
], CDSNotification);
var CDSNotification$1 = CDSNotification;
export { CDSNotification$1 as default };
//# sourceMappingURL=notification.js.map