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

package/es/components/about-modal/about-modal.js

@@ -0,0 +1,203 @@
+/**
+ * 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 { carbonPrefix, 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/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-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() {
+        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 `click` event on this element.
+         *
+         * @param event The event.
+         */
+        this._handleOutsideClick = (event) => {
+            var _a, _b;
+            const modal = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-modal`);
+            const modalContent = (_b = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.${carbonPrefix}--modal-container`);
+            const path = event.composedPath();
+            if (modalContent && !path.includes(modalContent)) {
+                this._handleClose(event.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,
+                },
+            };
+            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-modal ?open=${open}>
+        <div class=${`${blockClass}__logo`}>${logo}</div>
+        <cds-modal-header>
+          <cds-modal-close-button
+            @click=${handleClose}
+            close-button-label=${closeIconDescription}
+          ></cds-modal-close-button>
+          <cds-modal-heading>${title}</cds-modal-heading>
+        </cds-modal-header>
+        <cds-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-modal-body>
+        ${additionalInfo &&
+            html ` <cds-modal-footer> ${additionalInfo} </cds-modal-footer> `}
+      </cds-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`;
+    }
+    /**
+     * 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 `${prefix}-about-modal-beingclosed`;
+    }
+};
+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-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);
+__decorate([
+    HostListener('click')
+    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+], CDSAboutModal.prototype, "_handleOutsideClick", void 0);
+CDSAboutModal = __decorate([
+    carbonElement(`${prefix}-about-modal`)
+], CDSAboutModal);
+var CDSAboutModal$1 = CDSAboutModal;
+
+export { blockClass, CDSAboutModal$1 as default };
+//# sourceMappingURL=about-modal.js.map

package/es/components/about-modal/about-modal.js.map

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