@carbon/ibm-products-web-components/es-custom/components/about-modal/about-modal.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, state, query } from 'lit/decorators.js';
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 '@carbon/web-components/es-custom/components/modal/index.js';
import styles from './about-modal.scss.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';

/**
 * @license
 *
 * 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 blockClass = `${prefix}--about-modal`;
/**
 * About Modal.
 *
 * @element c4p-about-modal
 * @csspart dialog The dialog.
 *   The custom event fired before this about modal is being closed upon a user gesture.
 *   Cancellation of this event stops the user-initiated action of closing this about modal.
 * @fires c4p-about-modal-closed - The custom event fired after this about modal is closed upon a user gesture.
 */
let CDSAboutModal = class CDSAboutModal extends HostListenerMixin(LitElement) {
    constructor() {
        super(...arguments);
        /**
         * Determines if About Modal is open or not.
         */
        this.open = true;
        /**
         * Determines if About Modal is open or not.
         */
        this.closeIconDescription = 'close';
        /**
         * To check if the modal body is overflowing or not.
         */
        this.isOverflowing = false;
        this._handleKeydown = ({ key, target }) => {
            if (key === 'Esc' || key === 'Escape') {
                this._handleClose(target);
            }
        };
        /**
         * Handles user-initiated close request of this About Modal.
         *
         * @param triggeredBy The element that triggered this close request.
         */
        this._handleClose = (triggeredBy) => {
            this.open = false;
            const init = {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: {
                    triggeredBy,
                },
            };
            this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
        };
    }
    firstUpdated() {
        this._checkOverflow();
    }
    updated() {
        this._checkOverflow();
    }
    render() {
        const { open, closeIconDescription, _handleClose: handleClose, logo, title, version, additionalInfo, content, links, copyrightText, } = this;
        return html `
      <cds-custom-modal ?open=${open}>
        <div class=${`${blockClass}__logo`}>${logo}</div>
        <cds-custom-modal-header>
          <cds-custom-modal-close-button
            @click=${handleClose}
            close-button-label=${closeIconDescription}
          ></cds-custom-modal-close-button>
          <cds-custom-modal-heading>${title}</cds-custom-modal-heading>
        </cds-custom-modal-header>
        <cds-custom-modal-body
          class="${this.isOverflowing ? `${blockClass}-scroll-content` : ''}"
        >
          <div class=${`${blockClass}__body-content`}>
            <div class=${`${blockClass}__version`}>${version}</div>
            ${links &&
            links.length > 0 &&
            html ` <div class=${`${blockClass}__links-container`}>
              ${links.map((link) => link)}
            </div>`}
            ${content &&
            html `<p class=${`${blockClass}__content`}>${content}</p>`}
            ${copyrightText &&
            html `
              <p class=${`${blockClass}__copyright-text`}>${copyrightText}</p>
            `}
          </div>
        </cds-custom-modal-body>
        ${additionalInfo &&
            html ` <cds-custom-modal-footer> ${additionalInfo} </cds-custom-modal-footer> `}
      </cds-custom-modal>
    `;
    }
    _checkOverflow() {
        if (this.container) {
            this.isOverflowing =
                this.container.scrollHeight > this.container.clientHeight;
        }
    }
    /**
     * The name of the custom event fired after this About Modal is closed upon a user gesture.
     */
    static get eventClose() {
        return `${prefix}-about-modal-closed`;
    }
};
CDSAboutModal.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
__decorate([
    property({ reflect: true, type: Boolean })
], CDSAboutModal.prototype, "open", void 0);
__decorate([
    property({ type: String })
], CDSAboutModal.prototype, "closeIconDescription", void 0);
__decorate([
    property({ type: String })
], CDSAboutModal.prototype, "copyrightText", void 0);
__decorate([
    property()
], CDSAboutModal.prototype, "logo", void 0);
__decorate([
    property({ type: String })
], CDSAboutModal.prototype, "version", void 0);
__decorate([
    property()
], CDSAboutModal.prototype, "title", void 0);
__decorate([
    property()
], CDSAboutModal.prototype, "additionalInfo", void 0);
__decorate([
    property()
], CDSAboutModal.prototype, "content", void 0);
__decorate([
    property()
], CDSAboutModal.prototype, "links", void 0);
__decorate([
    state()
], CDSAboutModal.prototype, "isOverflowing", void 0);
__decorate([
    query('cds-custom-modal-body')
], CDSAboutModal.prototype, "container", void 0);
__decorate([
    HostListener('document:keydown')
    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
], CDSAboutModal.prototype, "_handleKeydown", void 0);
CDSAboutModal = __decorate([
    carbonElement(`${prefix}-about-modal`)
], CDSAboutModal);
var CDSAboutModal$1 = CDSAboutModal;

export { blockClass, CDSAboutModal$1 as default };
//# sourceMappingURL=about-modal.js.map