@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '@tmorrow/cre8-wc/icons/System/Regular/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/System/Regular/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'close-modal',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                svg=${svgClose}\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'close-modal';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}

package/lib/components/modal/modal.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=modal.styles.d.ts.map

package/lib/components/modal/modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmuBV,CAAC;AACH,eAAe,MAAM,CAAC"}