@carbon/ibm-products-web-components 0.18.0-rc.0 → 0.19.0-rc.0

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

@@ -0,0 +1,414 @@
+/**
+ * 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, 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 '@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';
+
+/**
+ * @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.
+ */
+let CDSNotificationPanel = class CDSNotificationPanel extends HostListenerMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines whether the notifications panel should render or not
+         */
+        this.open = false;
+        this._hasTodayContent = true;
+        this._hasPreviousContent = true;
+        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, _c;
+        (_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 slot = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('slot[name="previous"]');
+        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);
+            });
+        }
+    }
+    updated() {
+        this._markFirstNotification();
+        if (this.open) {
+            requestAnimationFrame(() => this._tryFocusDismissButton());
+        }
+    }
+    render() {
+        const { titleText, todayText, previousText, dismissAllLabel, doNotDisturbLabel, open, _hasTodayContent, _hasPreviousContent, _onDismissAllNotifications: onDismissAllNotifications, _handleToggle: handleToggle, } = this;
+        const classes = classMap({
+            [`${blockClass}__container`]: true,
+            [`${blockClass}__entrance`]: open,
+            [`${blockClass}__exit`]: !open,
+        });
+        return html `
+      <div role="dialog" tabindex="0" class=${classes}>
+        <div class="${blockClass}__header-container">
+          <div class="${blockClass}__header-flex">
+            <h2 class="${blockClass}__header">${titleText}</h2>
+            <cds-custom-button
+              size="sm"
+              kind="ghost"
+              class="${blockClass}__dismiss-button"
+              @click=${onDismissAllNotifications}
+            >
+              ${dismissAllLabel}
+            </cds-custom-button>
+          </div>
+          <cds-custom-toggle
+            size="sm"
+            class="${blockClass}__do-not-disturb-toggle"
+            id="${blockClass}__do-not-disturb-toggle-component"
+            label-a=${doNotDisturbLabel}
+            label-b=${doNotDisturbLabel}
+            aria-label=${doNotDisturbLabel}
+            @cds-custom-toggle-changed=${handleToggle}
+          ></cds-custom-toggle>
+        </div>
+        <div class="${blockClass}__main-section">
+          ${_hasTodayContent
+            ? html `
+                <h3 class="${blockClass}__time-section-label">${todayText}</h3>
+              `
+            : ''}
+          <slot name="today"></slot>
+          ${_hasPreviousContent
+            ? html `
+                <h3 class="${blockClass}__time-section-label">
+                  ${previousText}
+                </h3>
+              `
+            : ''}
+          <slot name="previous"></slot>
+        </div>
+        <div class="${blockClass}__bottom-actions-container">
+          <slot name="footer"></slot>
+        </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()) === 'c4p-notification') {
+            next.classList.add(`${blockClass}__notification--next`);
+        }
+    }
+    _handleMouseLeave(el) {
+        const next = el.nextElementSibling;
+        if ((next === null || next === void 0 ? void 0 : next.tagName.toLowerCase()) === 'c4p-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 this notification-panel is closed upon a user gesture.
+     */
+    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`;
+    }
+};
+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: '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$1 = CDSNotificationPanel;
+
+export { CDSNotificationPanel$1 as default };
+//# sourceMappingURL=notification-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-panel.js","sources":["../../../src/components/notification-panel/notification-panel.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+/**
+ * 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 { css } from 'lit';
+
+var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-custom-background,#fff);color:var(--cds-custom-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-custom-heading-06-font-size,2.625rem);font-weight:var(--cds-custom-heading-06-font-weight,300);letter-spacing:var(--cds-custom-heading-06-letter-spacing,0);line-height:var(--cds-custom-heading-06-line-height,1.199)}h2{font-size:var(--cds-custom-heading-05-font-size,2rem);font-weight:var(--cds-custom-heading-05-font-weight,400);letter-spacing:var(--cds-custom-heading-05-letter-spacing,0);line-height:var(--cds-custom-heading-05-line-height,1.25)}h3{font-size:var(--cds-custom-heading-04-font-size,1.75rem);font-weight:var(--cds-custom-heading-04-font-weight,400);letter-spacing:var(--cds-custom-heading-04-letter-spacing,0);line-height:var(--cds-custom-heading-04-line-height,1.28572)}h4{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4)}h5{font-size:var(--cds-custom-heading-02-font-size,1rem);font-weight:var(--cds-custom-heading-02-font-weight,600);letter-spacing:var(--cds-custom-heading-02-letter-spacing,0);line-height:var(--cds-custom-heading-02-line-height,1.5)}h6{font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857)}p{font-size:var(--cds-custom-body-02-font-size,1rem);font-weight:var(--cds-custom-body-02-font-weight,400);letter-spacing:var(--cds-custom-body-02-letter-spacing,0);line-height:var(--cds-custom-body-02-line-height,1.5)}a{color:var(--cds-custom-link-primary,#0062fe)}em{font-style:italic}@keyframes c4p--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes c4p--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes c4p--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.c4p--layout--size-xs{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xs,1.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xs{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xs,1.5rem))}.c4p--layout-constraint--size__min-xs{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout-constraint--size__max-xs{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xs,1.5rem)}.c4p--layout--size-sm{--c4p-layout-size-height-context:var(--c4p-layout-size-height-sm,2rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-sm{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-sm,2rem))}.c4p--layout-constraint--size__min-sm{--c4p-layout-size-height-min:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout-constraint--size__max-sm{--c4p-layout-size-height-max:var(--c4p-layout-size-height-sm,2rem)}.c4p--layout--size-md{--c4p-layout-size-height-context:var(--c4p-layout-size-height-md,2.5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-md{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-md,2.5rem))}.c4p--layout-constraint--size__min-md{--c4p-layout-size-height-min:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout-constraint--size__max-md{--c4p-layout-size-height-max:var(--c4p-layout-size-height-md,2.5rem)}.c4p--layout--size-lg{--c4p-layout-size-height-context:var(--c4p-layout-size-height-lg,3rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-lg{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-lg,3rem))}.c4p--layout-constraint--size__min-lg{--c4p-layout-size-height-min:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout-constraint--size__max-lg{--c4p-layout-size-height-max:var(--c4p-layout-size-height-lg,3rem)}.c4p--layout--size-xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-xl,4rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-xl,4rem))}.c4p--layout-constraint--size__min-xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout-constraint--size__max-xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-xl,4rem)}.c4p--layout--size-2xl{--c4p-layout-size-height-context:var(--c4p-layout-size-height-2xl,5rem);--c4p-layout-size-height:var(--c4p-layout-size-height-context)}.c4p--layout-constraint--size__default-2xl{--c4p-layout-size-height:var(--c4p-layout-size-height-context,var(--c4p-layout-size-height-2xl,5rem))}.c4p--layout-constraint--size__min-2xl{--c4p-layout-size-height-min:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout-constraint--size__max-2xl{--c4p-layout-size-height-max:var(--c4p-layout-size-height-2xl,5rem)}.c4p--layout--density-condensed{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-condensed,0.5rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-condensed{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-condensed,0.5rem))}.c4p--layout-constraint--density__min-condensed{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout-constraint--density__max-condensed{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-condensed,0.5rem)}.c4p--layout--density-normal{--c4p-layout-density-padding-inline-context:var(--c4p-layout-density-padding-inline-normal,1rem);--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context)}.c4p--layout-constraint--density__default-normal{--c4p-layout-density-padding-inline:var(--c4p-layout-density-padding-inline-context,var(--c4p-layout-density-padding-inline-normal,1rem))}.c4p--layout-constraint--density__min-normal{--c4p-layout-density-padding-inline-min:var(--c4p-layout-density-padding-inline-normal,1rem)}.c4p--layout-constraint--density__max-normal{--c4p-layout-density-padding-inline-max:var(--c4p-layout-density-padding-inline-normal,1rem)}:root{--c4p-layout-size-height-xs:1.5rem;--c4p-layout-size-height-sm:2rem;--c4p-layout-size-height-md:2.5rem;--c4p-layout-size-height-lg:3rem;--c4p-layout-size-height-xl:4rem;--c4p-layout-size-height-2xl:5rem;--c4p-layout-size-height-min:0px;--c4p-layout-size-height-max:999999999px;--c4p-layout-density-padding-inline-condensed:0.5rem;--c4p-layout-density-padding-inline-normal:1rem;--c4p-layout-density-padding-inline-min:0px;--c4p-layout-density-padding-inline-max:999999999px}.c4p--assistive-text,.c4p--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--empty-state{color:var(--cds-custom-text-primary,#161616);display:flex}.c4p--empty-state .c4p--empty-state__header{font-size:var(--cds-custom-heading-03-font-size,1.25rem);font-weight:var(--cds-custom-heading-03-font-weight,400);letter-spacing:var(--cds-custom-heading-03-letter-spacing,0);line-height:var(--cds-custom-heading-03-line-height,1.4);margin:0;padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857);padding-block-end:1rem}.c4p--empty-state .c4p--empty-state__header--small{font-size:var(--cds-custom-body-compact-02-font-size,1rem);font-weight:var(--cds-custom-body-compact-02-font-weight,400);letter-spacing:var(--cds-custom-body-compact-02-letter-spacing,0);line-height:var(--cds-custom-body-compact-02-line-height,1.375);padding-block-end:.5rem}.c4p--empty-state .c4p--empty-state__subtitle--small{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--empty-state__illustration{block-size:auto;margin-block-end:1rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--lg{max-inline-size:5rem;min-inline-size:5rem}.c4p--empty-state__illustration.c4p--empty-state__illustration--sm{max-inline-size:4rem;min-inline-size:4rem}.c4p--empty-state-position--top{flex-direction:column}.c4p--empty-state-position--right{flex-direction:row-reverse}.c4p--empty-state-position--bottom{flex-direction:column-reverse}.c4p--empty-state-position--left{flex-direction:row}.c4p--empty-state .c4p--empty-state__action-button{display:block;margin-block-end:1rem}.c4p--empty-state .c4p--empty-state__link{display:inline-block}@keyframes notifications-panel-fade-in{0%{opacity:0;transform:translateY(-38.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes notifications-panel-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-38.5rem)}}@keyframes notifications-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes notifications-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--notifications-panel__entrance{animation:notifications-panel-fade-in .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__exit{animation:notifications-panel-fade-out .24s cubic-bezier(.2,0,.38,.9) forwards}@media (prefers-reduced-motion){.c4p--notifications-panel__entrance{animation:notifications-panel-entrance-reduced .15s cubic-bezier(.2,0,1,.9) forwards}.c4p--notifications-panel__exit{animation:notifications-panel-exit-reduced .15s cubic-bezier(.2,0,1,.9) forwards}}.c4p--notifications-panel__container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);border-inline-start:1px solid var(--cds-custom-border-subtle-02,#e0e0e0);box-shadow:0 .125rem .25rem var(--cds-custom-overlay,hsla(0,0%,9%,.5));color:var(--cds-custom-text-primary,#161616);inset-block-start:3rem;inset-inline-end:0;max-block-size:38.5rem;max-inline-size:22.75rem;min-block-size:38.5rem;min-inline-size:20rem;overflow:auto;position:fixed;transition:transform .11s cubic-bezier(.2,0,.38,.9);z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-start:0;padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header-flex{align-items:center;display:flex;justify-content:space-between}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle{padding-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds-custom--toggle__label-text{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__dismiss-button{color:var(--cds-custom-text-primary,#161616)}.c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header{font-size:var(--cds-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572);margin:0}.c4p--notifications-panel__container .c4p--notifications-panel__time-section-label{background-color:var(--cds-custom-layer-01,#f4f4f4);color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);font-weight:600;inset-block-start:3.0625rem;letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);padding:.5rem 1rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover{background-color:var(--cds-custom-layer-accent-01,#e0e0e0)}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus .c4p--notifications-panel__dismiss-single-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification:hover .c4p--notifications-panel__dismiss-single-button{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification:focus{border-color:var(--cds-custom-focus,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-custom-focus,#0f62fe),inset 0 0 0 2px var(--cds-custom-background,#fff);outline:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification{align-items:flex-start;background-color:var(--cds-custom-layer-01,#f4f4f4);border:0;cursor:pointer;display:flex;inline-size:100%;min-block-size:6.25rem;padding:1rem;position:relative;text-align:start;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-heading-01-font-size,.875rem);font-weight:var(--cds-custom-heading-01-font-weight,600);font-weight:400;letter-spacing:var(--cds-custom-heading-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-01-line-height,1.42857);margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title.c4p--notifications-panel__notification-title-unread{color:var(--cds-custom-text-secondary,#525252);font-weight:600;margin-block-end:.25rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notifications-link{font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon{margin-inline-end:.5rem;min-inline-size:1rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-error{fill:var(--cds-custom-support-error,#da1e28)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success{fill:var(--cds-custom-support-success,#24a148)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning{fill:var(--cds-custom-support-warning,#f1c21b)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-informational{fill:var(--cds-custom-support-info,#0043ce)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{margin-block-end:.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-time-label{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-short-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-description.c4p--notifications-panel__notification-long-description{display:block;overflow:initial;-webkit-line-clamp:initial;line-clamp:none}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button{align-items:center;display:flex;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);min-inline-size:5.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:transform .24s ease}@media (prefers-reduced-motion:reduce){.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transition:none}}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-more-button .cds-custom--btn__icon{transform:rotate(0deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-less-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-content .c4p--notifications-panel__notification-read-more-button.c4p--notifications-panel__notification-read-less-button .cds-custom--btn__icon{transform:rotate(180deg)}.c4p--notifications-panel__container .c4p--notifications-panel__notification .cds-custom--popover-container{position:static}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button{align-items:center;color:var(--cds-custom-text-primary,#161616);display:flex;inset-block-start:0;inset-inline-end:0;justify-content:center;min-inline-size:2rem;opacity:0;padding:0;position:absolute}.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:focus,.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__dismiss-single-button:hover{opacity:1}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:var(--cds-custom-border-subtle-01,#c6c6c6);block-size:1px;content:\"\";inline-size:calc(100% - 2rem);inset-block-start:0;margin:0 auto;position:absolute;transition:background-color .24s cubic-bezier(.2,0,.38,.9)}.c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:hover+.c4p--notifications-panel__notification-previous:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover+.c4p--notifications-panel__notification-today:not(:first-of-type):before,.c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover+.c4p--notifications-panel__notification-yesterday:not(:first-of-type):before{background-color:transparent}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section{align-items:center;block-size:100%;display:flex;justify-content:center;margin-block-start:10rem;min-block-size:0}.c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--notifications-panel__container .c4p--notifications-panel__main-section{min-block-size:498px}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions{align-items:center;background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__view-all-button{align-items:center;block-size:2.5rem;border-inline-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);color:var(--cds-custom-text-primary,#161616);display:flex;inline-size:100%;max-inline-size:calc(100% - 2.5rem);min-block-size:2.5rem}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button{align-items:center;block-size:2.5rem;color:var(--cds-custom-text-primary,#161616);display:flex;justify-content:center;min-block-size:2.5rem;min-inline-size:2.5rem;padding:0}.c4p--notifications-panel__container .c4p--notifications-panel__bottom-actions .c4p--notifications-panel__settings-button .cds-custom--btn__icon{margin:0}.c4p--notifications-panel__header-container:has(.c4p--notifications-panel__do-not-disturb-toggle)+.c4p--notifications-panel__main-section .c4p--notifications-panel__time-section-label{inset-block-start:4.8125rem}:host(c4p-notification-panel) .c4p--notifications-panel__do-not-disturb-toggle{display:block;margin-block-start:-1rem}:host(c4p-notification-panel) ::slotted(.c4p--notifications-panel__bottom-actions){align-items:center;display:flex}.c4p--notifications-panel__header-container{--cds-custom-heading-06-font-size:--cds-custom-heading-compact-01-font-size;--cds-custom-heading-06-font-weight:--cds-custom-heading-compact-01-font-weight;--cds-custom-heading-06-line-height:--cds-custom-heading-compact-01-line-height;--cds-custom-heading-06-letter-spacing:--cds-custom-heading-compact-01-letter-spacing}.c4p--notifications-panel__dismiss-button{--cds-custom-link-primary:--cds-custom-text-primary;--cds-custom-link-primary-hover:--cds-custom-text-primary}.c4p--notifications-panel__bottom-actions-container{background-color:var(--cds-custom-layer-01,#f4f4f4);block-size:2.5rem;border-block-start:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);inset-block-end:0;min-block-size:2.5rem;position:sticky;z-index:2}"]);
+
+export { styles as default };
+//# sourceMappingURL=notification-panel.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-panel.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es-custom/components/notification-panel/notification-panel.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 './index';

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

@@ -0,0 +1,30 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { html } from '@open-wc/testing';
+import { render } from 'lit';
+import './notification-panel.js';
+import './notification.js';
+import './notification-footer.js';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 template = () => html `
+  <c4p-notification-panel> </c4p-notification-panel>
+`;
+describe('c4p-notification-panel', () => {
+    it('should render notification modal', async () => {
+        const element = render(template(), document.body);
+        expect(element).toBeDefined();
+    });
+});
+//# sourceMappingURL=notification-panel.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-panel.test.js","sources":["../../../src/components/notification-panel/notification-panel.test.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;AAKG;AAOH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;;CAE1B;AAED,QAAQ,CAAC,wBAAwB,EAAE,MAAK;AACtC,IAAA,EAAE,CAAC,kCAAkC,EAAE,YAAW;QAChD,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC;AACjD,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE;AAC/B,KAAC,CAAC;AACJ,CAAC,CAAC"}