@carbon/ibm-products-web-components 0.35.0 → 0.36.0

package/es-custom/components/notification-panel/notification-panel.js

@@ -1,215 +1,179 @@
 /**
- * Copyright IBM Corp. 2024
+ * 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 { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { property, query, state, queryAssignedElements } from 'lit/decorators.js';
-import { provide } from '@lit/context';
-import { prefix } from '../../globals/settings.js';
-import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
-import styles from './notification-panel.scss.js';
-import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
-import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { dateTimeLocaleContext } from './date-time-context.js';
+import { prefix } from "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { dateTimeLocaleContext } from "./date-time-context.js";
+import notification_panel_default$1 from "./notification-panel.scss.js";
+import { LitElement, html } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import HostListener from "@carbon/web-components/es/globals/decorators/host-listener.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 '@carbon/web-components/es-custom/components/button/index.js';
-import '@carbon/web-components/es-custom/components/toggle/index.js';
 import '@carbon/web-components/es-custom/components/icon-button/index.js';
-import '@carbon-labs/wc-empty-state/es/index.js';
+import { classMap } from "lit/directives/class-map.js";
+import { provide } from "@lit/context";
+import '@carbon/web-components/es-custom/components/toggle/index.js';
+import "@carbon-labs/wc-empty-state/es/index.js";
 
+//#region src/components/notification-panel/notification-panel.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.
- */
+* @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`;
 /**
- * NotificationPanel.
- *
- * @element c4p-notification-panel
- * @csspart dialog The dialog.
- * @slot today - Today Section.
- * @slot previous - Previous Section.
- * @slot footer - Footer for the Panel.
- * @fires c4p-notification-panel-beingclosed - The custom event before notification-panel is closed.
- * @fires c4p-notification-dismiss-all - The custom event fired after notification-panel is closed upon a user gesture.
- * @fires c4p-notification-donot-disturb-change - The custom event fired after notification-panel is closed upon a user gesture.
- * @fires c4p-notification-click-outside - The custom event fired after user clicks outside the panel or Esc key is pressed.
- */
+* NotificationPanel.
+*
+* @element c4p-notification-panel
+* @csspart dialog The dialog.
+* @slot today - Today Section.
+* @slot previous - Previous Section.
+* @slot footer - Footer for the Panel.
+* @fires c4p-notification-panel-beingclosed - The custom event before notification-panel is closed.
+* @fires c4p-notification-dismiss-all - The custom event fired after notification-panel is closed upon a user gesture.
+* @fires c4p-notification-donot-disturb-change - The custom event fired after notification-panel is closed upon a user gesture.
+* @fires c4p-notification-click-outside - The custom event fired after user clicks outside the panel or Esc key is pressed.
+*/
 let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Determines whether the notifications panel should render or not
-         */
-        this.open = false;
-        this._hasTodayContent = false;
-        this._hasPreviousContent = false;
-        this._handleKeydown = ({ key, target }) => {
-            var _a;
-            if (key === 'Escape') {
-                this.open = false;
-                const init = {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                    detail: {
-                        triggeredBy: target,
-                    },
-                };
-                this.dispatchEvent(new CustomEvent(this.constructor.eventClickOutside, init));
-                (_a = this.triggerButtonRef) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        // Use @HostListener for global document click events
-        this._handleClick = (event) => {
-            var _a, _b;
-            const target = event.target;
-            if (!this.open || this.contains(target)) {
-                return;
-            }
-            // Check if the target is an actionable element
-            const actionableSelectors = [
-                'a',
-                'button',
-                'input',
-                'select',
-                'textarea',
-                '[role="button"]',
-                '[role="link"]',
-                '[tabindex]:not([tabindex="-1"]',
-                'cds-custom-button',
-                'cds-custom-link',
-                'cds-custom-accordion-item',
-                'cds-custom-breadcrumb-item',
-                'cds-custom-icon-button',
-                'cds-custom-checkbox',
-                'cds-custom-dropdown',
-                'cds-custom-dropdown-item',
-                'cds-custom-file-uploader',
-                'cds-custom-file-uploader-button',
-                'cds-custom-menu-button',
-                'cds-custom-menu',
-                'cds-custom-menu-item',
-                'cds-custom-multi-select',
-                'cds-custom-multi-select-item',
-                'cds-custom-number-input',
-                'cds-custom-overflow-menu',
-                'cds-custom-overflow-menu-body',
-                'cds-custom-overflow-menu-item',
-                'cds-custom-pagination',
-                'cds-custom-select-item',
-                'cds-custom-radio-button',
-                'cds-custom-search',
-                'cds-custom-select',
-                'cds-custom-slider',
-                'cds-custom-slider-input',
-                'cds-custom-tabs',
-                'cds-custom-tab',
-                'cds-custom-textarea',
-                'cds-custom-text-input',
-                'cds-custom-time-picker',
-                'cds-custom-time-picker-select',
-                'cds-custom-select-item',
-                'cds-custom-toggle',
-                'cds-custom-toggletip',
-            ];
-            const isActionable = actionableSelectors.some((selector) => {
-                if (!(target instanceof Element)) {
-                    return false;
-                }
-                if (target.closest(selector)) {
-                    return true;
-                }
-                const root = target.getRootNode();
-                return (root instanceof ShadowRoot &&
-                    root.host instanceof Element &&
-                    root.host.matches(selector));
-            });
-            if (this.open && ((_a = this.triggerButtonRef) === null || _a === void 0 ? void 0 : _a.contains(target))) {
-                return;
-            }
-            const init = {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                detail: {
-                    triggeredBy: target,
-                },
-            };
-            if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
-                this.open = false;
-                this.dispatchEvent(new CustomEvent(this.constructor.eventClickOutside, init));
-                if (!isActionable) {
-                    (_b = this.triggerButtonRef) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            }
-        };
-    }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('dateTimeLocale')) {
-            this._providedLocale = this.dateTimeLocale;
-        }
-        if (changedProperties.has('_todayElements') ||
-            changedProperties.has('_previousElements')) {
-            this._hasTodayContent = this._todayElements.length > 0;
-            this._hasPreviousContent = this._previousElements.length > 0;
-        }
-    }
-    firstUpdated() {
-        var _a, _b;
-        (_a = this.todaySlot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', () => this._handleSlotChange('today'));
-        (_b = this.previousSlot) === null || _b === void 0 ? void 0 : _b.addEventListener('slotchange', () => this._handleSlotChange('previous'));
-        this._markFirstNotification();
-        const addNotificationListeners = (slotName) => {
-            var _a;
-            const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
-            const slottedElements = (slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || [];
-            for (const el of slottedElements) {
-                el.addEventListener('mouseenter', () => {
-                    this._handleMouseEnter(el);
-                });
-                el.addEventListener('mouseleave', () => {
-                    this._handleMouseLeave(el);
-                });
-                el.addEventListener('focusin', () => {
-                    this._handleFocusIn(el);
-                });
-                el.addEventListener('focusout', () => {
-                    this._handleFocusOut(el);
-                });
-            }
-        };
-        addNotificationListeners('today');
-        addNotificationListeners('previous');
-    }
-    updated() {
-        this._markFirstNotification();
-        if (this.open) {
-            requestAnimationFrame(() => this._tryFocusDismissButton());
-        }
-    }
-    render() {
-        const { titleText, todayText, previousText, dismissAllLabel, emptyStateLabel, doNotDisturbLabel, open, _hasTodayContent, _hasPreviousContent, _onDismissAllNotifications: onDismissAllNotifications, _handleToggle: handleToggle, } = this;
-        const classes = classMap({
-            [`${blockClass}__container`]: true,
-            [`${blockClass}__entrance`]: open,
-            [`${blockClass}__exit`]: !open,
-        });
-        const mainSectionClasses = classMap({
-            [`${blockClass}__main-section`]: true,
-            [`${blockClass}__main-section-empty`]: !_hasTodayContent && !_hasPreviousContent,
-        });
-        return html `
-      <div role="dialog" tabindex="0" class=${classes}>
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this._hasTodayContent = false;
+		this._hasPreviousContent = false;
+		this._handleKeydown = ({ key, target }) => {
+			if (key === "Escape") {
+				this.open = false;
+				const init = {
+					bubbles: true,
+					cancelable: true,
+					composed: true,
+					detail: { triggeredBy: target }
+				};
+				this.dispatchEvent(new CustomEvent(this.constructor.eventClickOutside, init));
+				this.triggerButtonRef?.focus();
+			}
+		};
+		this._handleClick = (event) => {
+			const target = event.target;
+			if (!this.open || this.contains(target)) return;
+			const isActionable = [
+				"a",
+				"button",
+				"input",
+				"select",
+				"textarea",
+				"[role=\"button\"]",
+				"[role=\"link\"]",
+				"[tabindex]:not([tabindex=\"-1\"]",
+				"cds-custom-button",
+				"cds-custom-link",
+				"cds-custom-accordion-item",
+				"cds-custom-breadcrumb-item",
+				"cds-custom-icon-button",
+				"cds-custom-checkbox",
+				"cds-custom-dropdown",
+				"cds-custom-dropdown-item",
+				"cds-custom-file-uploader",
+				"cds-custom-file-uploader-button",
+				"cds-custom-menu-button",
+				"cds-custom-menu",
+				"cds-custom-menu-item",
+				"cds-custom-multi-select",
+				"cds-custom-multi-select-item",
+				"cds-custom-number-input",
+				"cds-custom-overflow-menu",
+				"cds-custom-overflow-menu-body",
+				"cds-custom-overflow-menu-item",
+				"cds-custom-pagination",
+				"cds-custom-select-item",
+				"cds-custom-radio-button",
+				"cds-custom-search",
+				"cds-custom-select",
+				"cds-custom-slider",
+				"cds-custom-slider-input",
+				"cds-custom-tabs",
+				"cds-custom-tab",
+				"cds-custom-textarea",
+				"cds-custom-text-input",
+				"cds-custom-time-picker",
+				"cds-custom-time-picker-select",
+				"cds-custom-select-item",
+				"cds-custom-toggle",
+				"cds-custom-toggletip"
+			].some((selector) => {
+				if (!(target instanceof Element)) return false;
+				if (target.closest(selector)) return true;
+				const root = target.getRootNode();
+				return root instanceof ShadowRoot && root.host instanceof Element && root.host.matches(selector);
+			});
+			if (this.open && this.triggerButtonRef?.contains(target)) return;
+			const init = {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: { triggeredBy: target }
+			};
+			if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
+				this.open = false;
+				this.dispatchEvent(new CustomEvent(this.constructor.eventClickOutside, init));
+				if (!isActionable) this.triggerButtonRef?.focus();
+			}
+		};
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("dateTimeLocale")) this._providedLocale = this.dateTimeLocale;
+		if (changedProperties.has("_todayElements") || changedProperties.has("_previousElements")) {
+			this._hasTodayContent = this._todayElements.length > 0;
+			this._hasPreviousContent = this._previousElements.length > 0;
+		}
+	}
+	firstUpdated() {
+		this.todaySlot?.addEventListener("slotchange", () => this._handleSlotChange("today"));
+		this.previousSlot?.addEventListener("slotchange", () => this._handleSlotChange("previous"));
+		this._markFirstNotification();
+		const addNotificationListeners = (slotName) => {
+			const slottedElements = (this.shadowRoot?.querySelector(`slot[name="${slotName}"]`))?.assignedElements({ flatten: true }) || [];
+			for (const el of slottedElements) {
+				el.addEventListener("mouseenter", () => {
+					this._handleMouseEnter(el);
+				});
+				el.addEventListener("mouseleave", () => {
+					this._handleMouseLeave(el);
+				});
+				el.addEventListener("focusin", () => {
+					this._handleFocusIn(el);
+				});
+				el.addEventListener("focusout", () => {
+					this._handleFocusOut(el);
+				});
+			}
+		};
+		addNotificationListeners("today");
+		addNotificationListeners("previous");
+	}
+	updated() {
+		this._markFirstNotification();
+		if (this.open) requestAnimationFrame(() => this._tryFocusDismissButton());
+	}
+	render() {
+		const { titleText, todayText, previousText, dismissAllLabel, emptyStateLabel, doNotDisturbLabel, open, _hasTodayContent, _hasPreviousContent, _onDismissAllNotifications: onDismissAllNotifications, _handleToggle: handleToggle } = this;
+		return html`
+      <div role="dialog" tabindex="0" class=${classMap({
+			[`${blockClass}__container`]: true,
+			[`${blockClass}__entrance`]: open,
+			[`${blockClass}__exit`]: !open
+		})}>
         <div class="${blockClass}__header-container">
           <div class="${blockClass}__header-flex">
             <h2 class="${blockClass}__header">${titleText}</h2>
@@ -232,231 +196,197 @@ let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(
             @cds-custom-toggle-changed=${handleToggle}
           ></cds-custom-toggle>
         </div>
-        <div class=${mainSectionClasses}>
-          ${_hasTodayContent
-            ? html `
+        <div class=${classMap({
+			[`${blockClass}__main-section`]: true,
+			[`${blockClass}__main-section-empty`]: !_hasTodayContent && !_hasPreviousContent
+		})}>
+          ${_hasTodayContent ? html`
                 <h3
                   class="${blockClass}__time-section-label ${blockClass}__time-section-label--today"
                 >
                   ${todayText}
                 </h3>
-              `
-            : ''}
+              ` : ""}
           <slot name="today"></slot>
-          ${_hasPreviousContent
-            ? html `
+          ${_hasPreviousContent ? html`
                 <h3
                   class="${blockClass}__time-section-label ${blockClass}__time-section-label--previous"
                 >
                   ${previousText}
                 </h3>
-              `
-            : ''}
+              ` : ""}
           <slot name="previous"></slot>
-          ${!_hasTodayContent && !_hasPreviousContent
-            ? html ` <slot name="empty-state">
+          ${!_hasTodayContent && !_hasPreviousContent ? html` <slot name="empty-state">
                 <clabs-empty-state
                   subtitle="${emptyStateLabel}"
                   kind="notifications"
                 >
                 </clabs-empty-state>
-              </slot>`
-            : ''}
+              </slot>` : ""}
         </div>
-        ${_hasTodayContent || _hasPreviousContent
-            ? html `<div class="${blockClass}__bottom-actions-container">
+        ${_hasTodayContent || _hasPreviousContent ? html`<div class="${blockClass}__bottom-actions-container">
               <slot name="footer"></slot>
-            </div>`
-            : ''}
+            </div>` : ""}
       </div>
     `;
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    _handleMouseEnter(el) {
-        const next = el.nextElementSibling;
-        if ((next === null || next === void 0 ? void 0 : next.tagName.toLowerCase()) === `${prefix}-notification`) {
-            next.classList.add(`${blockClass}__notification--next`);
-        }
-    }
-    _handleMouseLeave(el) {
-        const next = el.nextElementSibling;
-        if ((next === null || next === void 0 ? void 0 : next.tagName.toLowerCase()) === `${prefix}-notification`) {
-            next.classList.remove(`${blockClass}__notification--next`);
-        }
-    }
-    _handleFocusIn(el) {
-        const next = el.nextElementSibling;
-        if ((next === null || next === void 0 ? void 0 : next.tagName.toLowerCase()) === `${prefix}-notification`) {
-            next.classList.add(`${blockClass}__notification--next`);
-        }
-    }
-    _handleFocusOut(el) {
-        const next = el.nextElementSibling;
-        if ((next === null || next === void 0 ? void 0 : next.tagName.toLowerCase()) === `${prefix}-notification`) {
-            next.classList.remove(`${blockClass}__notification--next`);
-        }
-    }
-    _markFirstNotification() {
-        const notifications = this.querySelectorAll(`${prefix}-notification`);
-        notifications.forEach((el, i) => {
-            el.classList.toggle('first-notification', i === 0);
-        });
-    }
-    _handleSlotChange(slotName) {
-        slotName === 'today'
-            ? (this._hasTodayContent = this._todayElements.length > 0)
-            : (this._hasPreviousContent = this._previousElements.length > 0);
-    }
-    _tryFocusDismissButton() {
-        var _a;
-        const button = this.renderRoot.querySelector(`.${blockClass}__dismiss-button`);
-        if (button) {
-            button.focus();
-        }
-        else {
-            (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-            this._mutationObserver = new MutationObserver(() => {
-                var _a;
-                const btn = this.renderRoot.querySelector(`.${blockClass}__dismiss-button`);
-                if (btn) {
-                    btn.focus();
-                    (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-                }
-            });
-            this._mutationObserver.observe(this.renderRoot, {
-                childList: true,
-                subtree: true,
-            });
-        }
-    }
-    /**
-     * Handles user-initiated dismiss of all notifications.
-     *
-     * @param event The event that triggered the click.
-     */
-    _onDismissAllNotifications(event) {
-        const triggeredBy = event.target;
-        event.stopPropagation();
-        const init = {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-                triggeredBy,
-            },
-        };
-        this.dispatchEvent(new CustomEvent(this.constructor.eventDismissAll, init));
-    }
-    _handleToggle(event) {
-        const triggeredBy = event.target;
-        const init = {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-                triggeredBy,
-            },
-        };
-        this.dispatchEvent(new CustomEvent(this.constructor.eventDonotDisturbChange, init));
-    }
-    /**
-     * A selector selecting tabbable nodes.
-     */
-    static get selectorTabbable() {
-        return selectorTabbable;
-    }
-    /**
-     * The name of the custom event fired before this notification-panel is being closed upon a user gesture.
-     * Cancellation of this event stops the user-initiated action of closing this notification-panel.
-     */
-    static get eventBeforeClose() {
-        return `${prefix}-notification-panel-beingclosed`;
-    }
-    /**
-     * The name of the custom event fired after this notification-panel is closed upon a user gesture.
-     */
-    static get eventClickOutside() {
-        return `${prefix}-notification-click-outside`;
-    }
-    /**
-     * The name of the custom event fired after dismiss all button click
-     */
-    static get eventDismissAll() {
-        return `${prefix}-notification-dismiss-all`;
-    }
-    /**
-     * The name of the custom event fired after this do not disturb button toggled.
-     */
-    static get eventDonotDisturbChange() {
-        return `${prefix}-notification-donot-disturb-change`;
-    }
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._mutationObserver?.disconnect();
+	}
+	_handleMouseEnter(el) {
+		const next = el.nextElementSibling;
+		if (next?.tagName.toLowerCase() === `${prefix}-notification`) next.classList.add(`${blockClass}__notification--next`);
+	}
+	_handleMouseLeave(el) {
+		const next = el.nextElementSibling;
+		if (next?.tagName.toLowerCase() === `${prefix}-notification`) next.classList.remove(`${blockClass}__notification--next`);
+	}
+	_handleFocusIn(el) {
+		const next = el.nextElementSibling;
+		if (next?.tagName.toLowerCase() === `${prefix}-notification`) next.classList.add(`${blockClass}__notification--next`);
+	}
+	_handleFocusOut(el) {
+		const next = el.nextElementSibling;
+		if (next?.tagName.toLowerCase() === `${prefix}-notification`) next.classList.remove(`${blockClass}__notification--next`);
+	}
+	_markFirstNotification() {
+		this.querySelectorAll(`${prefix}-notification`).forEach((el, i) => {
+			el.classList.toggle("first-notification", i === 0);
+		});
+	}
+	_handleSlotChange(slotName) {
+		slotName === "today" ? this._hasTodayContent = this._todayElements.length > 0 : this._hasPreviousContent = this._previousElements.length > 0;
+	}
+	_tryFocusDismissButton() {
+		const button = this.renderRoot.querySelector(`.${blockClass}__dismiss-button`);
+		if (button) button.focus();
+		else {
+			this._mutationObserver?.disconnect();
+			this._mutationObserver = new MutationObserver(() => {
+				const btn = this.renderRoot.querySelector(`.${blockClass}__dismiss-button`);
+				if (btn) {
+					btn.focus();
+					this._mutationObserver?.disconnect();
+				}
+			});
+			this._mutationObserver.observe(this.renderRoot, {
+				childList: true,
+				subtree: true
+			});
+		}
+	}
+	/**
+	* Handles user-initiated dismiss of all notifications.
+	*
+	* @param event The event that triggered the click.
+	*/
+	_onDismissAllNotifications(event) {
+		const triggeredBy = event.target;
+		event.stopPropagation();
+		const init = {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { triggeredBy }
+		};
+		this.dispatchEvent(new CustomEvent(this.constructor.eventDismissAll, init));
+	}
+	_handleToggle(event) {
+		const init = {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { triggeredBy: event.target }
+		};
+		this.dispatchEvent(new CustomEvent(this.constructor.eventDonotDisturbChange, init));
+	}
+	/**
+	* A selector selecting tabbable nodes.
+	*/
+	static get selectorTabbable() {
+		return selectorTabbable;
+	}
+	/**
+	* The name of the custom event fired before this notification-panel is being closed upon a user gesture.
+	* Cancellation of this event stops the user-initiated action of closing this notification-panel.
+	*/
+	static get eventBeforeClose() {
+		return `${prefix}-notification-panel-beingclosed`;
+	}
+	/**
+	* The name of the custom event fired after this notification-panel is closed upon a user gesture.
+	*/
+	static get eventClickOutside() {
+		return `${prefix}-notification-click-outside`;
+	}
+	/**
+	* The name of the custom event fired after dismiss all button click
+	*/
+	static get eventDismissAll() {
+		return `${prefix}-notification-dismiss-all`;
+	}
+	/**
+	* The name of the custom event fired after this do not disturb button toggled.
+	*/
+	static get eventDonotDisturbChange() {
+		return `${prefix}-notification-donot-disturb-change`;
+	}
+	static {
+		this.styles = notification_panel_default$1;
+	}
 };
-CDSNotificationPanel.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-__decorate([
-    property({ type: String, attribute: 'title-text' })
-], CDSNotificationPanel.prototype, "titleText", void 0);
-__decorate([
-    property({ type: String, attribute: 'today-text' })
-], CDSNotificationPanel.prototype, "todayText", void 0);
-__decorate([
-    property({ type: String, attribute: 'previous-text' })
-], CDSNotificationPanel.prototype, "previousText", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], CDSNotificationPanel.prototype, "open", void 0);
-__decorate([
-    property({ type: String, attribute: 'dismiss-all-label' })
-], CDSNotificationPanel.prototype, "dismissAllLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'empty-state-label' })
-], CDSNotificationPanel.prototype, "emptyStateLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'donot-disturb-label' })
-], CDSNotificationPanel.prototype, "doNotDisturbLabel", void 0);
-__decorate([
-    property({ type: Object })
-], CDSNotificationPanel.prototype, "triggerButtonRef", void 0);
-__decorate([
-    property({ type: String, attribute: 'date-time-locale' })
-], CDSNotificationPanel.prototype, "dateTimeLocale", void 0);
-__decorate([
-    provide({ context: dateTimeLocaleContext })
-    // @ts-ignore
-], CDSNotificationPanel.prototype, "_providedLocale", void 0);
-__decorate([
-    query('slot[name="today"]')
-], CDSNotificationPanel.prototype, "todaySlot", void 0);
-__decorate([
-    query('slot[name="previous"]')
-], CDSNotificationPanel.prototype, "previousSlot", void 0);
-__decorate([
-    state() // Use @state decorator
-], CDSNotificationPanel.prototype, "_hasTodayContent", void 0);
-__decorate([
-    state() // Use @state decorator
-], CDSNotificationPanel.prototype, "_hasPreviousContent", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'today', flatten: true })
-], CDSNotificationPanel.prototype, "_todayElements", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'previous', flatten: true })
-], CDSNotificationPanel.prototype, "_previousElements", void 0);
-__decorate([
-    HostListener('keydown')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSNotificationPanel.prototype, "_handleKeydown", void 0);
-__decorate([
-    HostListener('document:click')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSNotificationPanel.prototype, "_handleClick", void 0);
-CDSNotificationPanel = __decorate([
-    carbonElement(`${prefix}-notification-panel`)
-], CDSNotificationPanel);
-var CDSNotificationPanel_default = CDSNotificationPanel;
+__decorate([property({
+	type: String,
+	attribute: "title-text"
+})], CDSNotificationPanel.prototype, "titleText", void 0);
+__decorate([property({
+	type: String,
+	attribute: "today-text"
+})], CDSNotificationPanel.prototype, "todayText", void 0);
+__decorate([property({
+	type: String,
+	attribute: "previous-text"
+})], CDSNotificationPanel.prototype, "previousText", void 0);
+__decorate([property({
+	reflect: true,
+	type: Boolean
+})], CDSNotificationPanel.prototype, "open", void 0);
+__decorate([property({
+	type: String,
+	attribute: "dismiss-all-label"
+})], CDSNotificationPanel.prototype, "dismissAllLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "empty-state-label"
+})], CDSNotificationPanel.prototype, "emptyStateLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "donot-disturb-label"
+})], CDSNotificationPanel.prototype, "doNotDisturbLabel", void 0);
+__decorate([property({ type: Object })], CDSNotificationPanel.prototype, "triggerButtonRef", void 0);
+__decorate([property({
+	type: String,
+	attribute: "date-time-locale"
+})], CDSNotificationPanel.prototype, "dateTimeLocale", void 0);
+__decorate([provide({ context: dateTimeLocaleContext })], CDSNotificationPanel.prototype, "_providedLocale", void 0);
+__decorate([query("slot[name=\"today\"]")], CDSNotificationPanel.prototype, "todaySlot", void 0);
+__decorate([query("slot[name=\"previous\"]")], CDSNotificationPanel.prototype, "previousSlot", void 0);
+__decorate([state()], CDSNotificationPanel.prototype, "_hasTodayContent", void 0);
+__decorate([state()], CDSNotificationPanel.prototype, "_hasPreviousContent", void 0);
+__decorate([queryAssignedElements({
+	slot: "today",
+	flatten: true
+})], CDSNotificationPanel.prototype, "_todayElements", void 0);
+__decorate([queryAssignedElements({
+	slot: "previous",
+	flatten: true
+})], CDSNotificationPanel.prototype, "_previousElements", void 0);
+__decorate([HostListener("keydown")], CDSNotificationPanel.prototype, "_handleKeydown", void 0);
+__decorate([HostListener("document:click")], CDSNotificationPanel.prototype, "_handleClick", void 0);
+CDSNotificationPanel = __decorate([carbonElement(`${prefix}-notification-panel`)], CDSNotificationPanel);
+var notification_panel_default = CDSNotificationPanel;
 
-export { CDSNotificationPanel_default as default };
-//# sourceMappingURL=notification-panel.js.map
+//#endregion
+export { notification_panel_default as default };
+//# sourceMappingURL=notification-panel.js.map