@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
147 lines (145 loc) • 6.2 kB
JavaScript
/**
* 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 "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import about_modal_default$1 from "./about-modal.scss.js";
import { LitElement, html } from "lit";
import { property, query, 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 { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import '@carbon/web-components/es-custom/components/modal/index.js';
//#region src/components/about-modal/about-modal.ts
/**
* @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 = `c4p--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-beingclosed
* 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(..._args) {
super(..._args);
this.open = true;
this.closeIconDescription = "close";
this.isOverflowing = false;
this._handleKeydown = ({ key, target }) => {
if (key === "Esc" || key === "Escape") this._handleClose(target);
};
this._handleOutsideClick = (event) => {
const modalContent = (this.shadowRoot?.querySelector(`cds-custom-modal`))?.shadowRoot?.querySelector(`.cds-custom--modal-container`);
const path = event.composedPath();
if (modalContent && !path.includes(modalContent)) this._handleClose(event.target);
};
this._handleClose = (triggeredBy) => {
this.open = false;
const init = {
bubbles: true,
cancelable: true,
composed: true,
detail: { triggeredBy }
};
if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
this.open = false;
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 ? `cds-custom--modal-scroll-content` : ""}"
tabindex="0"
role="region"
aria-label="Modal 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 `c4p-about-modal-closed`;
}
/**
* The name of 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.
*/
static get eventBeforeClose() {
return `c4p-about-modal-beingclosed`;
}
static {
this.styles = about_modal_default$1;
}
};
__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")], CDSAboutModal.prototype, "_handleKeydown", void 0);
__decorate([HostListener("click")], CDSAboutModal.prototype, "_handleOutsideClick", void 0);
CDSAboutModal = __decorate([carbonElement(`c4p-about-modal`)], CDSAboutModal);
var about_modal_default = CDSAboutModal;
//#endregion
export { blockClass, about_modal_default as default };
//# sourceMappingURL=about-modal.js.map