@sula-tech/webcomponents 0.8.0 → 0.9.0

package/dist/collection/components/sula-modal/sula-modal.js

@@ -0,0 +1,558 @@
+import { Host, h } from "@stencil/core";
+import { SulaModalSlotOverflow, SulaModalType } from "./model/sula-modal.model";
+import { SulaButtonAppearance } from "../sula-button/model/sula-button.model";
+export class SulaModal {
+    constructor() {
+        /**
+         * Is modal opened
+         */
+        this.opened = false;
+        /**
+         * Block body scroll when modal is opened
+         */
+        this.blockBodyScroll = true;
+        /**
+         * Close modal when clicking outside
+         */
+        this.closeOnClickOutside = true;
+        /**
+         * Type of the modal
+         */
+        this.type = SulaModalType.Custom;
+        /**
+         * Icon of the modal header
+         */
+        this.headerIcon = '';
+        /**
+         * Title of the modal
+         */
+        this.modalTitle = '';
+        /**
+         * Promotional image URL for promo type modal
+         */
+        this.promoImage = '';
+        /**
+         * Subtitle of the modal
+         */
+        this.subTitle = '';
+        /**
+         * Primary button text
+         */
+        this.primaryButtonText = '';
+        /**
+         * Secondary button text
+         */
+        this.secondaryButtonText = '';
+        /**
+         * Slot overflow behavior
+         */
+        this.slotOverflow = SulaModalSlotOverflow.Auto;
+        this.isAnimating = false;
+        this.shouldRender = false;
+    }
+    handleOpenedChange(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.isAnimating = true;
+                });
+            });
+        }
+        else {
+            this.isAnimating = false;
+            this.closeTimeout = setTimeout(() => {
+                this.shouldRender = false;
+            }, 300);
+        }
+        this.handleParentOverflow();
+    }
+    componentWillLoad() {
+        if (this.opened) {
+            this.shouldRender = true;
+            this.isAnimating = true;
+        }
+        this.handleParentOverflow();
+    }
+    disconnectedCallback() {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+        }
+    }
+    handleParentOverflow() {
+        var _a;
+        const overflow = this.opened && this.blockBodyScroll ? 'hidden' : 'inherit';
+        if ((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            this.hostElement.parentElement.style.overflow = overflow;
+        }
+    }
+    closeModal() {
+        this.opened = false;
+        this.modalClosed.emit();
+    }
+    handleClickOutside(event) {
+        if (this.closeOnClickOutside && event.target === event.currentTarget) {
+            this.closeModal();
+        }
+    }
+    handlePrimaryButtonClick() {
+        this.primaryButtonClicked.emit();
+    }
+    handleSecondaryButtonClick() {
+        this.secondaryButtonClicked.emit();
+    }
+    isAlertOrCustomOrPromo() {
+        return this.type === SulaModalType.Alert || this.type === SulaModalType.Custom || this.type === SulaModalType.Promo;
+    }
+    isListOrCustomFull() {
+        return this.type === SulaModalType.List || this.type === SulaModalType.CustomFull;
+    }
+    isSideModal() {
+        return this.type === SulaModalType.Side || this.type === SulaModalType.SpecialSide;
+    }
+    isPromoOrSpecialSide() {
+        return this.type === SulaModalType.Promo || this.type === SulaModalType.SpecialSide;
+    }
+    hasSlotContent() {
+        return (this.type === SulaModalType.Custom || this.type === SulaModalType.Promo || this.type === SulaModalType.List || this.type === SulaModalType.CustomFull || this.isSideModal());
+    }
+    hasButtons() {
+        return this.type === SulaModalType.Alert || this.type === SulaModalType.Custom;
+    }
+    getOverlayClasses() {
+        return {
+            'modal-overlay absolute inset-0 bg-opacity-overlay flex z-[999] transition-opacity duration-300': true,
+            'opacity-100': this.isAnimating,
+            'opacity-0': !this.isAnimating,
+            'items-end justify-center md:items-center': this.isAlertOrCustomOrPromo(),
+            'items-end justify-center': this.isListOrCustomFull(),
+            'justify-end': this.isSideModal(),
+        };
+    }
+    getWrapperClasses() {
+        return {
+            'modal-wrapper transition-all duration-300 ease-out': true,
+            'w-full md:w-[852px] flex md:flex-row flex-col h-[70vh] md:h-auto relative': this.type === SulaModalType.Promo,
+            'w-full flex justify-center items-center': !this.isPromoOrSpecialSide() && !this.isSideModal(),
+            'w-full flex justify-end': this.isSideModal(),
+            'modal-slide-up': (this.isAlertOrCustomOrPromo() || this.isListOrCustomFull()) && !this.isSideModal(),
+            'modal-slide-right': this.isSideModal(),
+            'modal-active': this.isAnimating,
+        };
+    }
+    getContentClasses() {
+        return {
+            'bg-box-shadow-body rounded-b-none border border-line-hair px-14 py-24 md:px-32 md:py-48': true,
+            'md:rounded-b-lg rounded-lg': !this.isSideModal(),
+            'w-full md:w-[448px]': this.type === SulaModalType.Alert,
+            'w-full md:w-[768px] pb-32': this.type === SulaModalType.Custom,
+            'w-full md:w-1/2 h-[50vh] md:h-auto pb-0 md:pb-96 rounded-none md:rounded-lg md:rounded-l-none': this.type === SulaModalType.Promo,
+            'w-full md:w-[80vw] max-h-[90vh] rounded-b-none relative': this.isListOrCustomFull(),
+            'rounded-none w-[440px]': this.type === SulaModalType.Side,
+            'rounded-none w-1/2': this.type === SulaModalType.SpecialSide,
+        };
+    }
+    getHeaderClasses() {
+        return {
+            'flex w-full': true,
+            'relative': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,
+            'pb-24': this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,
+            'pb-0 md:pb-24 md:relative': this.type === SulaModalType.Promo,
+            'pb-40': this.type === SulaModalType.Side,
+        };
+    }
+    getCloseButtonClasses() {
+        return {
+            'w-40 h-40 rounded-full absolute right-0 flex justify-center items-center cursor-pointer': true,
+            '-top-8 md:-top-16': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,
+            'bg-surface-on-body hover:bg-states-empty-bg-hover text-icon-primary': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo,
+            'top-20 right-20 bg-opacity-overlay text-negative-negative-1 md:bg-surface-on-body hover:bg-states-empty-bg-hover md:-top-16 md:text-icon-primary': this.type === SulaModalType.Promo,
+            '-top-64 right-12 md:right-0 bg-opacity-on-overlay text-negative-negative-1': this.isListOrCustomFull(),
+            'top-32 right-32': this.type === SulaModalType.Side,
+        };
+    }
+    getTitleContainerClasses() {
+        return {
+            'flex flex-col space-y-12': true,
+            'items-center justify-center': this.type === SulaModalType.List,
+        };
+    }
+    getTitleClasses() {
+        return {
+            'text-heading-small text-text-primary pr-16': true,
+            'text-paragraph-large-bold': this.type === SulaModalType.List,
+            'text-heading-medium': this.type === SulaModalType.List,
+        };
+    }
+    getSlotClasses() {
+        return {
+            'mt-12 w-full max-h-[40vh]': true,
+            'max-h-[80vh]': this.type === SulaModalType.List,
+            'max-h-[67.6vh]': this.type === SulaModalType.CustomFull,
+            'max-h-[72.7vh]': this.type === SulaModalType.Side,
+            'max-h-[87%]': this.type === SulaModalType.SpecialSide,
+            'overflow-auto': this.slotOverflow === SulaModalSlotOverflow.Auto,
+            'overflow-hidden': this.slotOverflow === SulaModalSlotOverflow.Hidden,
+        };
+    }
+    getButtonContainerClasses() {
+        return {
+            'w-full mt-48 flex': true,
+            'flex-col space-y-12': this.type === SulaModalType.Alert,
+            'flex-row-reverse space-x-reverse space-x-12': this.type === SulaModalType.Custom,
+        };
+    }
+    renderPromoImage() {
+        if (!this.isPromoOrSpecialSide()) {
+            return null;
+        }
+        const imageClasses = {
+            'w-full md:w-1/2 h-[20vh] md:h-auto overflow-hidden flex': true,
+            'rounded-b-none md:rounded-b-lg md:rounded-r-none rounded-lg': this.type === SulaModalType.Promo,
+        };
+        return (h("div", { class: imageClasses }, h("img", { src: this.promoImage, alt: "Promotional Image", class: "w-full h-full object-cover" })));
+    }
+    renderHeaderIcon() {
+        if ((this.type === SulaModalType.Alert || this.type === SulaModalType.Custom) && this.headerIcon) {
+            return (h("div", { class: "w-64 h-64 border border-line-general flex justify-center items-center rounded-full" }, h("sula-icon", { icon: this.headerIcon, customClass: "text-5xl text-icon-primary", class: "flex" })));
+        }
+        return null;
+    }
+    renderCloseButton() {
+        return (h("div", { class: this.getCloseButtonClasses(), onClick: () => this.closeModal() }, h("sula-icon", { icon: "ph ph-x", customClass: "text-2xl", class: "flex" })));
+    }
+    renderTitleSection() {
+        if (!this.modalTitle && !this.subTitle) {
+            return null;
+        }
+        return (h("div", { class: this.getTitleContainerClasses() }, this.modalTitle && h("h1", { class: this.getTitleClasses() }, this.modalTitle), this.subTitle && h("p", { class: "text-paragraph-medium-regular text-text-secondary" }, this.subTitle)));
+    }
+    renderSlot() {
+        if (!this.hasSlotContent()) {
+            return null;
+        }
+        return (h("div", { class: this.getSlotClasses() }, h("slot", null)));
+    }
+    renderButtons() {
+        if (!this.hasButtons()) {
+            return null;
+        }
+        return (h("div", { class: this.getButtonContainerClasses() }, this.primaryButtonText && h("sula-button", { text: this.primaryButtonText, fullWidth: true, onButtonClicked: () => this.handlePrimaryButtonClick() }), this.secondaryButtonText && (h("sula-button", { onButtonClicked: () => this.handleSecondaryButtonClick(), appearance: SulaButtonAppearance.Secondary, text: this.secondaryButtonText, fullWidth: true }))));
+    }
+    render() {
+        if (!this.shouldRender) {
+            return h(Host, null);
+        }
+        return (h(Host, null, h("div", { class: this.getOverlayClasses(), onClick: event => this.handleClickOutside(event) }, h("div", { class: this.getWrapperClasses() }, this.renderPromoImage(), h("div", { class: this.getContentClasses() }, h("div", { class: this.getHeaderClasses() }, this.renderHeaderIcon(), this.renderCloseButton()), this.renderTitleSection(), this.renderSlot(), this.renderButtons())))));
+    }
+    static get is() { return "sula-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "attribute": "opened",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is modal opened"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "blockBodyScroll": {
+                "type": "boolean",
+                "attribute": "block-body-scroll",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Block body scroll when modal is opened"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "attribute": "close-on-click-outside",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close modal when clicking outside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaModalType",
+                    "resolved": "SulaModalType.Alert | SulaModalType.Custom | SulaModalType.CustomFull | SulaModalType.List | SulaModalType.Promo | SulaModalType.Side | SulaModalType.SpecialSide",
+                    "references": {
+                        "SulaModalType": {
+                            "location": "import",
+                            "path": "./model/sula-modal.model",
+                            "id": "src/components/sula-modal/model/sula-modal.model.ts::SulaModalType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaModalType.Custom"
+            },
+            "headerIcon": {
+                "type": "string",
+                "attribute": "header-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon of the modal header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "modalTitle": {
+                "type": "string",
+                "attribute": "modal-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "promoImage": {
+                "type": "string",
+                "attribute": "promo-image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Promotional image URL for promo type modal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "subTitle": {
+                "type": "string",
+                "attribute": "sub-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subtitle of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "attribute": "primary-button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "attribute": "secondary-button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "slotOverflow": {
+                "type": "string",
+                "attribute": "slot-overflow",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaModalSlotOverflow",
+                    "resolved": "SulaModalSlotOverflow.Auto | SulaModalSlotOverflow.Hidden",
+                    "references": {
+                        "SulaModalSlotOverflow": {
+                            "location": "import",
+                            "path": "./model/sula-modal.model",
+                            "id": "src/components/sula-modal/model/sula-modal.model.ts::SulaModalSlotOverflow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slot overflow behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaModalSlotOverflow.Auto"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAnimating": {},
+            "shouldRender": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "modalClosed",
+                "name": "modalClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "primaryButtonClicked",
+                "name": "primaryButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the primary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "secondaryButtonClicked",
+                "name": "secondaryButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the secondary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "handleOpenedChange"
+            }];
+    }
+}
+//# sourceMappingURL=sula-modal.js.map

package/dist/collection/components/sula-modal/sula-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-modal.js","sourceRoot":"","sources":["../../../src/components/sula-modal/sula-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaModalSlotOverflow, SulaModalType } from './model/sula-modal.model';\nimport { SulaButtonAppearance } from '../sula-button/model/sula-button.model';\n\n@Component({\n  tag: 'sula-modal',\n  styleUrl: 'sula-modal.scss',\n  shadow: true,\n})\nexport class SulaModal {\n  /**\n   * Is modal opened\n   */\n  @Prop({ mutable: true }) opened: boolean = false;\n\n  /**\n   * Block body scroll when modal is opened\n   */\n  @Prop({ mutable: true }) blockBodyScroll: boolean = true;\n\n  /**\n   * Close modal when clicking outside\n   */\n  @Prop({ mutable: true }) closeOnClickOutside: boolean = true;\n\n  /**\n   * Type of the modal\n   */\n  @Prop() type: SulaModalType = SulaModalType.Custom;\n\n  /**\n   * Icon of the modal header\n   */\n  @Prop() headerIcon: string = '';\n\n  /**\n   * Title of the modal\n   */\n  @Prop() modalTitle: string = '';\n\n  /**\n   * Promotional image URL for promo type modal\n   */\n  @Prop() promoImage: string = '';\n\n  /**\n   * Subtitle of the modal\n   */\n  @Prop() subTitle: string = '';\n\n  /**\n   * Primary button text\n   */\n  @Prop() primaryButtonText: string = '';\n\n  /**\n   * Secondary button text\n   */\n  @Prop() secondaryButtonText: string = '';\n\n  /**\n   * Slot overflow behavior\n   */\n  @Prop() slotOverflow: SulaModalSlotOverflow = SulaModalSlotOverflow.Auto;\n\n  /**\n   * Event emitted when the modal is closed\n   */\n  @Event()\n  modalClosed: EventEmitter<void>;\n\n  /**\n   * Event emitted when the primary button is clicked\n   */\n  @Event()\n  primaryButtonClicked: EventEmitter<void>;\n\n  /**\n   * Event emitted when the secondary button is clicked\n   */\n  @Event()\n  secondaryButtonClicked: EventEmitter<void>;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isAnimating: boolean = false;\n  @State() shouldRender: boolean = false;\n\n  private closeTimeout: NodeJS.Timeout;\n\n  @Watch('opened')\n  handleOpenedChange(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.isAnimating = true;\n        });\n      });\n    } else {\n      this.isAnimating = false;\n\n      this.closeTimeout = setTimeout(() => {\n        this.shouldRender = false;\n      }, 300);\n    }\n    this.handleParentOverflow();\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.shouldRender = true;\n      this.isAnimating = true;\n    }\n    this.handleParentOverflow();\n  }\n\n  disconnectedCallback() {\n    if (this.closeTimeout) {\n      clearTimeout(this.closeTimeout);\n    }\n  }\n\n  handleParentOverflow(): void {\n    const overflow = this.opened && this.blockBodyScroll ? 'hidden' : 'inherit';\n\n    if (this.hostElement?.parentElement) {\n      this.hostElement.parentElement.style.overflow = overflow;\n    }\n  }\n\n  closeModal(): void {\n    this.opened = false;\n    this.modalClosed.emit();\n  }\n\n  handleClickOutside(event: MouseEvent): void {\n    if (this.closeOnClickOutside && event.target === event.currentTarget) {\n      this.closeModal();\n    }\n  }\n\n  handlePrimaryButtonClick(): void {\n    this.primaryButtonClicked.emit();\n  }\n\n  handleSecondaryButtonClick(): void {\n    this.secondaryButtonClicked.emit();\n  }\n\n  isAlertOrCustomOrPromo(): boolean {\n    return this.type === SulaModalType.Alert || this.type === SulaModalType.Custom || this.type === SulaModalType.Promo;\n  }\n\n  isListOrCustomFull(): boolean {\n    return this.type === SulaModalType.List || this.type === SulaModalType.CustomFull;\n  }\n\n  isSideModal(): boolean {\n    return this.type === SulaModalType.Side || this.type === SulaModalType.SpecialSide;\n  }\n\n  isPromoOrSpecialSide(): boolean {\n    return this.type === SulaModalType.Promo || this.type === SulaModalType.SpecialSide;\n  }\n\n  hasSlotContent(): boolean {\n    return (\n      this.type === SulaModalType.Custom || this.type === SulaModalType.Promo || this.type === SulaModalType.List || this.type === SulaModalType.CustomFull || this.isSideModal()\n    );\n  }\n\n  hasButtons(): boolean {\n    return this.type === SulaModalType.Alert || this.type === SulaModalType.Custom;\n  }\n\n  getOverlayClasses(): Record<string, boolean> {\n    return {\n      'modal-overlay absolute inset-0 bg-opacity-overlay flex z-[999] transition-opacity duration-300': true,\n      'opacity-100': this.isAnimating,\n      'opacity-0': !this.isAnimating,\n      'items-end justify-center md:items-center': this.isAlertOrCustomOrPromo(),\n      'items-end justify-center': this.isListOrCustomFull(),\n      'justify-end': this.isSideModal(),\n    };\n  }\n\n  getWrapperClasses(): Record<string, boolean> {\n    return {\n      'modal-wrapper transition-all duration-300 ease-out': true,\n      'w-full md:w-[852px] flex md:flex-row flex-col h-[70vh] md:h-auto relative': this.type === SulaModalType.Promo,\n      'w-full flex justify-center items-center': !this.isPromoOrSpecialSide() && !this.isSideModal(),\n      'w-full flex justify-end': this.isSideModal(),\n\n      'modal-slide-up': (this.isAlertOrCustomOrPromo() || this.isListOrCustomFull()) && !this.isSideModal(),\n      'modal-slide-right': this.isSideModal(),\n      'modal-active': this.isAnimating,\n    };\n  }\n\n  getContentClasses(): Record<string, boolean> {\n    return {\n      'bg-box-shadow-body rounded-b-none border border-line-hair px-14 py-24 md:px-32 md:py-48': true,\n      'md:rounded-b-lg rounded-lg': !this.isSideModal(),\n      'w-full md:w-[448px]': this.type === SulaModalType.Alert,\n      'w-full md:w-[768px] pb-32': this.type === SulaModalType.Custom,\n      'w-full md:w-1/2 h-[50vh] md:h-auto pb-0 md:pb-96 rounded-none md:rounded-lg md:rounded-l-none': this.type === SulaModalType.Promo,\n      'w-full md:w-[80vw] max-h-[90vh] rounded-b-none relative': this.isListOrCustomFull(),\n      'rounded-none w-[440px]': this.type === SulaModalType.Side,\n      'rounded-none w-1/2': this.type === SulaModalType.SpecialSide,\n    };\n  }\n\n  getHeaderClasses(): Record<string, boolean> {\n    return {\n      'flex w-full': true,\n      'relative': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,\n      'pb-24': this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,\n      'pb-0 md:pb-24 md:relative': this.type === SulaModalType.Promo,\n      'pb-40': this.type === SulaModalType.Side,\n    };\n  }\n\n  getCloseButtonClasses(): Record<string, boolean> {\n    return {\n      'w-40 h-40 rounded-full absolute right-0 flex justify-center items-center cursor-pointer': true,\n      '-top-8 md:-top-16': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo && this.type !== SulaModalType.Side,\n      'bg-surface-on-body hover:bg-states-empty-bg-hover text-icon-primary': !this.isListOrCustomFull() && this.type !== SulaModalType.Promo,\n      'top-20 right-20 bg-opacity-overlay text-negative-negative-1 md:bg-surface-on-body hover:bg-states-empty-bg-hover md:-top-16 md:text-icon-primary':\n        this.type === SulaModalType.Promo,\n      '-top-64 right-12 md:right-0 bg-opacity-on-overlay text-negative-negative-1': this.isListOrCustomFull(),\n      'top-32 right-32': this.type === SulaModalType.Side,\n    };\n  }\n\n  getTitleContainerClasses(): Record<string, boolean> {\n    return {\n      'flex flex-col space-y-12': true,\n      'items-center justify-center': this.type === SulaModalType.List,\n    };\n  }\n\n  getTitleClasses(): Record<string, boolean> {\n    return {\n      'text-heading-small text-text-primary pr-16': true,\n      'text-paragraph-large-bold': this.type === SulaModalType.List,\n      'text-heading-medium': this.type === SulaModalType.List,\n    };\n  }\n\n  getSlotClasses(): Record<string, boolean> {\n    return {\n      'mt-12 w-full max-h-[40vh]': true,\n      'max-h-[80vh]': this.type === SulaModalType.List,\n      'max-h-[67.6vh]': this.type === SulaModalType.CustomFull,\n      'max-h-[72.7vh]': this.type === SulaModalType.Side,\n      'max-h-[87%]': this.type === SulaModalType.SpecialSide,\n      'overflow-auto': this.slotOverflow === SulaModalSlotOverflow.Auto,\n      'overflow-hidden': this.slotOverflow === SulaModalSlotOverflow.Hidden,\n    };\n  }\n\n  getButtonContainerClasses(): Record<string, boolean> {\n    return {\n      'w-full mt-48 flex': true,\n      'flex-col space-y-12': this.type === SulaModalType.Alert,\n      'flex-row-reverse space-x-reverse space-x-12': this.type === SulaModalType.Custom,\n    };\n  }\n\n  renderPromoImage() {\n    if (!this.isPromoOrSpecialSide()) {\n      return null;\n    }\n\n    const imageClasses = {\n      'w-full md:w-1/2 h-[20vh] md:h-auto overflow-hidden flex': true,\n      'rounded-b-none md:rounded-b-lg md:rounded-r-none rounded-lg': this.type === SulaModalType.Promo,\n    };\n\n    return (\n      <div class={imageClasses}>\n        <img src={this.promoImage} alt=\"Promotional Image\" class=\"w-full h-full object-cover\" />\n      </div>\n    );\n  }\n\n  renderHeaderIcon() {\n    if ((this.type === SulaModalType.Alert || this.type === SulaModalType.Custom) && this.headerIcon) {\n      return (\n        <div class=\"w-64 h-64 border border-line-general flex justify-center items-center rounded-full\">\n          <sula-icon icon={this.headerIcon} customClass=\"text-5xl text-icon-primary\" class=\"flex\" />\n        </div>\n      );\n    }\n    return null;\n  }\n\n  renderCloseButton() {\n    return (\n      <div class={this.getCloseButtonClasses()} onClick={() => this.closeModal()}>\n        <sula-icon icon=\"ph ph-x\" customClass=\"text-2xl\" class=\"flex\" />\n      </div>\n    );\n  }\n\n  renderTitleSection() {\n    if (!this.modalTitle && !this.subTitle) {\n      return null;\n    }\n\n    return (\n      <div class={this.getTitleContainerClasses()}>\n        {this.modalTitle && <h1 class={this.getTitleClasses()}>{this.modalTitle}</h1>}\n        {this.subTitle && <p class=\"text-paragraph-medium-regular text-text-secondary\">{this.subTitle}</p>}\n      </div>\n    );\n  }\n\n  renderSlot() {\n    if (!this.hasSlotContent()) {\n      return null;\n    }\n\n    return (\n      <div class={this.getSlotClasses()}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  renderButtons() {\n    if (!this.hasButtons()) {\n      return null;\n    }\n\n    return (\n      <div class={this.getButtonContainerClasses()}>\n        {this.primaryButtonText && <sula-button text={this.primaryButtonText} fullWidth={true} onButtonClicked={() => this.handlePrimaryButtonClick()} />}\n        {this.secondaryButtonText && (\n          <sula-button onButtonClicked={() => this.handleSecondaryButtonClick()} appearance={SulaButtonAppearance.Secondary} text={this.secondaryButtonText} fullWidth={true} />\n        )}\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.shouldRender) {\n      return <Host />;\n    }\n\n    return (\n      <Host>\n        <div class={this.getOverlayClasses()} onClick={event => this.handleClickOutside(event)}>\n          <div class={this.getWrapperClasses()}>\n            {this.renderPromoImage()}\n            <div class={this.getContentClasses()}>\n              <div class={this.getHeaderClasses()}>\n                {this.renderHeaderIcon()}\n                {this.renderCloseButton()}\n              </div>\n              {this.renderTitleSection()}\n              {this.renderSlot()}\n              {this.renderButtons()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}