@carbon/ibm-products-web-components/es/components/notification-panel/notification-footer.js

Carbon for IBM Products Web Components

/**
 * 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 { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
import Settings16 from '@carbon/web-components/es/icons/settings/16';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import styles from './notification-footer.scss.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 Footer.
 *
 * @element c4p-notification-footer
 * @csspart dialog The dialog.
 * @fires c4p-notification-view-all
 *   The custom event is fired when a user clicks on View All button.
 * @fires c4p-notification-settings - The custom event is fired when User clicks on settings button.
 */
let CDSNotificationFooter = class CDSNotificationFooter extends HostListenerMixin(LitElement) {
    constructor() {
        super(...arguments);
        /**
         * Label for View All Text
         */
        this.viewAllLabel = 'View All';
    }
    render() {
        const { viewAllLabel, _viewAllNotification: viewAllNotification, _onClickSettings: onClickSettings, } = this;
        return html `
      <cds-button
        kind="ghost"
        class="${blockClass}__view-all-button"
        @click=${viewAllNotification}
      >
        ${viewAllLabel}
      </cds-button>
      <cds-button
        kind="ghost"
        size="sm"
        class="${blockClass}__settings-button"
        @click=${onClickSettings}
      >
        ${Settings16({ slot: 'icon' })}
      </cds-button>
    `;
    }
    _viewAllNotification(event) {
        const triggeredBy = event.target;
        event.stopPropagation();
        const init = {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
                triggeredBy,
            },
        };
        this.dispatchEvent(new CustomEvent(this.constructor.notificationViewAll, init));
    }
    _onClickSettings(event) {
        const triggeredBy = event.target;
        event.stopPropagation();
        const init = {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
                triggeredBy,
            },
        };
        this.dispatchEvent(new CustomEvent(this.constructor.notificationSettings, init));
    }
    /**
     * A selector selecting tabbable nodes.
     */
    static get selectorTabbable() {
        return selectorTabbable;
    }
    /**
     * The custom event is fired when a notification is clicked or when the Enter key is pressed on it.
     */
    static get notificationViewAll() {
        return `${prefix}-notification-view-all`;
    }
    /**
     * The custom event is fired when the notification is closed by a user gesture.
     */
    static get notificationSettings() {
        return `${prefix}-notification-settings`;
    }
};
CDSNotificationFooter.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
__decorate([
    property({ reflect: true, type: String, attribute: 'view-all-label' })
], CDSNotificationFooter.prototype, "viewAllLabel", void 0);
CDSNotificationFooter = __decorate([
    carbonElement(`${prefix}-notification-footer`)
], CDSNotificationFooter);
var CDSNotificationFooter$1 = CDSNotificationFooter;

export { CDSNotificationFooter$1 as default };
//# sourceMappingURL=notification-footer.js.map