@salesforcedevs/dx-components 0.0.0-alpha.0 → 0.0.0-alpha.3

package/lwc.config.json

@@ -19,6 +19,7 @@
         "dx/cardSmall",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
+        "dx/cardTrialExpanded",
         "dx/cardVideoPreview",
         "dx/checkbox",
         "dx/checkboxGroup",
@@ -46,6 +47,7 @@
         "dx/imageAndLabel",
         "dx/input",
         "dx/logo",
+        "dx/modal",
         "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.0.0-alpha.0",
+    "version": "0.0.0-alpha.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/cardTrial/cardTrial.css

@@ -9,7 +9,7 @@
 }
 
 .card-trial.has-image {
-    padding-bottom: 80px;
+    padding-bottom: 90px;
 }
 
 dx-icon-badge.badge-main {
@@ -21,6 +21,7 @@ dx-icon-badge.badge-main {
 
 .label {
     color: var(--dx-g-gray-30);
+    margin-top: 5px;
     margin-bottom: var(--dx-g-spacing-md);
 }
 
@@ -28,17 +29,13 @@ dx-card-title {
     margin-bottom: var(--dx-g-spacing-xs);
 }
 
-.body {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
 .terms {
+    margin-top: var(--dx-g-spacing-md);
     font-weight: var(--dx-g-font-bold);
 }
 
 dx-hr {
     --dx-c-hr-padding-horizontal: 0;
-
     width: 100%;
 }
 
@@ -47,6 +44,10 @@ dx-hr {
     flex-direction: column;
 }
 
+.details_top-margin {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
 .detail {
     display: flex;
     flex-direction: row;
@@ -68,7 +69,6 @@ img {
     position: absolute;
     bottom: 0;
     right: var(--dx-g-spacing-mlg);
-    width: var(--dx-g-spacing-6xl);
 }
 
 dx-button {
@@ -124,55 +124,3 @@ dx-button {
     margin-top: 15px;
     width: 100%;
 }
-
-.button-details {
-    margin-top: 25px;
-}
-
-.clickable {
-    cursor: pointer;
-}
-
-.two-col-container {
-    display: flex;
-    max-width: 976px;
-}
-
-.col-one {
-    padding: var(--dx-g-spacing-mlg);
-    flex: 0 0 388px;
-}
-
-.col-two {
-    background-color: var(--dx-g-indigo-vibrant-15);
-    padding: var(--dx-g-spacing-2xl);
-    flex: 1;
-}
-
-.col-two dx-card-title {
-    --dx-c-card-title-color: white;
-}
-
-.col-two-title {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    font-weight: var(--dx-g-font-demi);
-    margin-top: var(--dx-g-spacing-mlg);
-}
-
-.col-two-subtitle {
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-normal);
-}
-
-.col-two-title,
-.col-two-subtitle {
-    color: white;
-}
-
-@media screen and (max-width: 768px) {
-    .two-col-container {
-        flex-direction: column;
-    }
-}

package/src/modules/dx/cardTrial/cardTrial.html

@@ -1,124 +1,114 @@
 <template>
-    <div class={twoColClassName}>
-        <div class="recommended-container" if:true={recommended}>
-            <span class="recommended-label">Recommended</span>
+    <dx-modal
+        if:true={hasTwoButtons}
+        open={_modalOpen}
+        ontogglemodal={toggleModal}
+    >
+        <dx-card-trial-expanded
+            badge-background-color={badgeBackgroundColor}
+            badge-sprite={badgeSprite}
+            badge-symbol={badgeSymbol}
+            body={body}
+            button-cta={buttonOneCta}
+            button-href={buttonOneHref}
+            button-icon={buttonOneIcon}
+            button-icon-size={buttonOneIconSize}
+            details={details}
+            href={href}
+            label={label}
+            col-two-title={modalTitle}
+            col-two-details={modalDetails}
+            target={target}
+            terms={terms}
+            title={title}
+            ontogglemodal={toggleModal}
+        ></dx-card-trial-expanded>
+    </dx-modal>
+    <div class="recommended-container" if:true={recommended}>
+        <span class="recommended-label">Recommended</span>
+    </div>
+    <div
+        class={className}
+        role={ariaRole}
+        href={href}
+        target={target}
+        onclick={handleClick}
+    >
+        <template if:true={topText}>
+            <span class="top-text dx-text-body-4">{topText}</span>
+            <dx-hr spacing="md"></dx-hr>
+        </template>
+        <div class="badge-container">
+            <dx-icon-badge
+                class="badge-main"
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+            <dx-type-badge
+                if:true={typeBadgeValue}
+                value={typeBadgeValue}
+                color={typeBadgeColor}
+                size={typeBadgeSize}
+                type={typeBadgeType}
+            ></dx-type-badge>
         </div>
-        <div
-            class={className}
-            role={ariaRole}
+        <dx-card-title
             href={href}
             target={target}
-            onclick={handleClick}
+            title={title}
+        ></dx-card-title>
+        <span class="label dx-text-body-3">{label}</span>
+        <p class="body dx-text-body-2 static-font">{body}</p>
+        <span class="terms dx-text-body-3 static-font">{terms}</span>
+        <dx-hr if:false={hasButtons} spacing="lg"></dx-hr>
+        <dx-button
+            if:true={hasOneButton}
+            class="button-one"
+            size="large"
+            href={buttonOneHref}
+            variant="primary"
+            font="sans"
+            icon-symbol={buttonOneIcon}
+            icon-size={buttonOneIconSize}
         >
-            <template if:true={topText}>
-                <span class="top-text dx-text-body-4">{topText}</span>
-                <dx-hr spacing="md"></dx-hr>
-            </template>
-            <div class="badge-container">
-                <dx-icon-badge
-                    class="badge-main"
-                    background-color={badgeBackgroundColor}
-                    symbol={badgeSymbol}
-                    sprite={badgeSprite}
-                ></dx-icon-badge>
-                <dx-type-badge
-                    if:true={typeBadgeValue}
-                    value={typeBadgeValue}
-                    color={typeBadgeColor}
-                    size={typeBadgeSize}
-                    type={typeBadgeType}
-                ></dx-type-badge>
-            </div>
-            <dx-card-title
-                href={href}
-                target={target}
-                title={title}
-            ></dx-card-title>
-            <span class="label dx-text-body-3">{label}</span>
-            <p class="body dx-text-body-3 static-font">{body}</p>
-            <span class="terms dx-text-body-3 static-font">{terms}</span>
-            <template if:false={hasButtons}>
-                <dx-hr spacing="md"></dx-hr>
-                <ul class="details">
-                    <template for:each={details} for:item="detail">
-                        <li class="detail" key={detail}>
-                            <dx-icon-badge
-                                background-color={badgeBackgroundColor}
-                                symbol="check"
-                            ></dx-icon-badge>
-                            <span class="detail-text dx-text-body-4">
-                                {detail}
-                            </span>
-                        </li>
-                    </template>
-                </ul>
-            </template>
-            <template if:true={hasOneButton}>
-                <dx-button
-                    class="button-one"
-                    size="large"
-                    href={buttonOneHref}
-                    variant="primary"
-                    font="sans"
-                    icon-symbol={buttonOneIcon}
-                    icon-size={buttonOneIconSize}
-                >
-                    {buttonOneCta}
-                </dx-button>
-                <ul class="details button-details" if:true={hasDetails}>
-                    <template for:each={details} for:item="detail">
-                        <li class="detail" key={detail}>
-                            <dx-icon-badge
-                                background-color={badgeBackgroundColor}
-                                symbol="check"
-                            ></dx-icon-badge>
-                            <span class="detail-text dx-text-body-4">
-                                {detail}
-                            </span>
-                        </li>
-                    </template>
-                </ul>
-            </template>
-            <template if:true={hasTwoButtons}>
-                <div class="button-container">
-                    <dx-button
-                        class="button-one"
-                        size="large"
-                        href={buttonOneHref}
-                        variant="primary"
-                        font="sans"
-                        icon-symbol={buttonOneIcon}
-                        icon-size={buttonOneIconSize}
-                    >
-                        {buttonOneCta}
-                    </dx-button>
-                    <dx-button
-                        class="button-two"
-                        size="large"
-                        href={buttonTwoHref}
-                        variant="secondary"
-                        font="sans"
-                        icon-symbol={buttonTwoIcon}
-                        icon-size={buttonTwoIconSize}
-                    >
-                        {buttonTwoCta}
-                    </dx-button>
-                </div>
-            </template>
-            <img if:true={imgSrc} src={imgSrc} alt="" />
+            {buttonOneCta}
+        </dx-button>
+        <div if:true={hasTwoButtons} class="button-container">
+            <dx-button
+                class="button-one"
+                size="large"
+                href={buttonOneHref}
+                variant="primary"
+                font="sans"
+                icon-symbol={buttonOneIcon}
+                icon-size={buttonOneIconSize}
+            >
+                {buttonOneCta}
+            </dx-button>
+            <dx-button
+                class="button-two"
+                size="large"
+                onclick={toggleModal}
+                variant="secondary"
+                font="sans"
+                icon-symbol={buttonTwoIcon}
+                icon-size={buttonTwoIconSize}
+            >
+                {buttonTwoCta}
+            </dx-button>
         </div>
-        <div if:true={twoColTitle} class="col-two">
-            <dx-card-title
-                href={twoColTitleHref}
-                target={twoColTarget}
-                title={twoColTitle}
-            ></dx-card-title>
-            <template for:each={twoColDetails} for:item="twoColDetail">
-                <div key={twoColDetail.title}>
-                    <p class="col-two-title">{twoColDetail.title}</p>
-                    <p class="col-two-subtitle">{twoColDetail.subtitle}</p>
-                </div>
+        <ul class={detailsClassName} if:true={hasDetails}>
+            <template for:each={details} for:item="detail">
+                <li class="detail" key={detail}>
+                    <dx-icon-badge
+                        background-color={badgeBackgroundColor}
+                        symbol="check"
+                    ></dx-icon-badge>
+                    <span class="detail-text dx-text-body-4">{detail}</span>
+                </li>
             </template>
-        </div>
+        </ul>
+        <img if:true={imgSrc} src={imgSrc} alt="" />
     </div>
 </template>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -10,11 +10,11 @@ export default class CardTrial extends LightningElement {
     @api buttonOneCta?: string;
     @api buttonOneHref?: string;
     @api buttonOneIcon?: string;
-    @api buttonOneIconSize?: string;
+    @api buttonOneIconSize?: string = "large";
     @api buttonTwoCta?: string;
     @api buttonTwoHref?: string;
     @api buttonTwoIcon?: string;
-    @api buttonTwoIconSize?: string;
+    @api buttonTwoIconSize?: string = "large";
     @api href!: string;
     @api imgSrc?: string;
     @api label!: string;
@@ -23,13 +23,16 @@ export default class CardTrial extends LightningElement {
     @api terms!: string;
     @api title!: string;
     @api topText?: string;
+    @api modalTitle?: string;
+
     @api twoColTitle?: string;
     @api twoColTarget?: string;
     @api twoColHref!: string;
     @api typeBadgeValue?: string;
-    @api typeBadgeColor?: string;
-    @api typeBadgeSize?: string;
-    @api typeBadgeType?: string;
+    @api typeBadgeColor?: string = "default";
+    @api typeBadgeSize?: string = "default";
+    @api typeBadgeType?: string = "content-type";
+
     @api
     get details() {
         return this._details;
@@ -39,11 +42,11 @@ export default class CardTrial extends LightningElement {
     }
 
     @api
-    get twoColDetails() {
-        return this._twoColDetails;
+    get modalDetails() {
+        return this._modalDetails;
     }
-    set twoColDetails(value) {
-        this._twoColDetails = toJson(value);
+    set modalDetails(value) {
+        this._modalDetails = toJson(value);
     }
 
     get hasDetails() {
@@ -51,15 +54,15 @@ export default class CardTrial extends LightningElement {
     }
 
     get hasOneButton() {
-        return this.buttonOneCta && !this.buttonTwoCta;
+        return !!(this.buttonOneCta && !this.buttonTwoCta);
     }
 
     get hasTwoButtons() {
-        return this.buttonOneCta && this.buttonTwoCta;
+        return !!(this.buttonOneCta && this.buttonTwoCta);
     }
 
     get hasButtons() {
-        return this.hasOneButton || this.hasTwoButtons;
+        return !!(this.buttonOneCta || this.buttonTwoCta);
     }
 
     get ariaRole() {
@@ -67,31 +70,31 @@ export default class CardTrial extends LightningElement {
     }
 
     private _details!: string[];
-    private _twoColDetails!: [{ title: string; subtitle: string }];
+    private _modalDetails!: [{ title: string; subtitle: string }];
+    private _modalOpen = false;
 
     private get className() {
         return cx(
             "card-trial",
-            !this.twoColTitle && "dx-card-base",
-            !this.twoColTitle && "dx-card-base_section-vertical",
-            this.twoColTitle && "col-one",
+            "dx-card-base",
+            "dx-card-base_section-vertical",
             this.imgSrc && "has-image",
-            this.recommended && "recommended-border",
-            !this.hasButtons && "clickable"
+            this.recommended && "recommended-border"
         );
     }
 
-    private get twoColClassName() {
-        return cx(
-            this.twoColTitle && "two-col-container",
-            this.twoColTitle && "dx-card-base"
-        );
+    private get detailsClassName() {
+        return cx("details", this.hasButtons && "details_top-margin");
+    }
+
+    private toggleModal() {
+        this._modalOpen = !this._modalOpen;
     }
 
     private handleClick() {
         // card is clickable only if it doesn't contain buttons (for accessibility reasons)
         if (!this.hasButtons) {
-            window.location = this.href;
+            window.location.assign(this.href);
         }
     }
 }

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css

@@ -0,0 +1,141 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+.container {
+    max-width: 976px;
+    margin: 0 var(--dx-g-spacing-lg);
+    overflow: auto;
+    max-height: 100vh;
+}
+
+.content-container {
+    display: flex;
+    border-radius: var(--dx-g-spacing-md);
+    overflow: hidden;
+    pointer-events: all;
+}
+
+.badge-main {
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
+    --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);
+
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.title-main {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.button-cta {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+    margin-top: 15px;
+    width: 100%;
+}
+
+.button-container {
+    margin-bottom: var(--dx-g-spacing-smd);
+    position: sticky;
+    top: -1px;
+}
+
+.is-sticky {
+    background-color: var(--dx-g-gray-95);
+    border-bottom: 1px solid var(--dx-g-gray-80);
+    margin-bottom: 0;
+    padding: 10px 10px 10px 0;
+}
+
+.button-close {
+    --dx-c-button-background-color: white;
+    margin-left: auto;
+    pointer-events: all;
+}
+
+.label {
+    color: var(--dx-g-gray-30);
+    margin-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.terms {
+    margin-top: var(--dx-g-spacing-md);
+    font-weight: var(--dx-g-font-bold);
+}
+
+.label,
+.terms,
+dx-button {
+    display: block;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--dx-g-spacing-lg);
+}
+
+.detail {
+    display: flex;
+    flex-direction: row;
+}
+
+.detail:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.badge-detail {
+    --dx-c-icon-badge-icon-size: 10px;
+    --dx-c-icon-badge-size: 18px;
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-40);
+
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+.col-one {
+    background-color: white;
+    padding: var(--dx-g-spacing-mlg);
+    flex: 0 0 388px;
+}
+
+.col-two {
+    background-color: var(--dx-g-indigo-vibrant-15);
+    padding: var(--dx-g-spacing-2xl);
+    flex: 1;
+}
+
+.title-secondary {
+    --dx-c-card-title-color: white;
+}
+
+.col-two-detail-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.col-two-detail-subtitle {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-normal);
+}
+
+.col-two-detail-title,
+.col-two-detail-subtitle {
+    color: white;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        max-width: 550px;
+    }
+
+    .content-container {
+        flex-direction: column;
+    }
+}

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -0,0 +1,72 @@
+<template>
+    <div class="container">
+        <div class="button-container">
+            <dx-button
+                class="button-close"
+                variant="secondary"
+                icon-symbol="close"
+                onclick={handleModalClose}
+            >
+                Close
+            </dx-button>
+        </div>
+        <div class="content-container">
+            <div class="col-one">
+                <dx-icon-badge
+                    class="badge-main"
+                    background-color={badgeBackgroundColor}
+                    symbol={badgeSymbol}
+                    sprite={badgeSprite}
+                ></dx-icon-badge>
+                <dx-card-title
+                    class="title-main"
+                    href={href}
+                    target={target}
+                    title={title}
+                ></dx-card-title>
+                <span class="label dx-text-body-3">{label}</span>
+                <p class="body dx-text-body-2 static-font">{body}</p>
+                <span class="terms dx-text-body-3 static-font">{terms}</span>
+                <dx-button
+                    class="button-cta"
+                    size="large"
+                    href={href}
+                    variant="primary"
+                    font="sans"
+                    icon-symbol={buttonIcon}
+                    icon-size={buttonIconSize}
+                >
+                    {buttonCta}
+                </dx-button>
+                <ul class="details">
+                    <template for:each={details} for:item="item">
+                        <li class="detail" key={item}>
+                            <dx-icon-badge
+                                class="badge-detail"
+                                background-color={badgeBackgroundColor}
+                                symbol="check"
+                            ></dx-icon-badge>
+                            <span class="detail-text dx-text-body-4">
+                                {item}
+                            </span>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+            <div class="col-two">
+                <dx-card-title
+                    class="title-secondary"
+                    title={colTwoTitle}
+                ></dx-card-title>
+                <template for:each={colTwoDetails} for:item="colTwoItem">
+                    <div key={colTwoItem.title}>
+                        <p class="col-two-detail-title">{colTwoItem.title}</p>
+                        <p class="col-two-detail-subtitle">
+                            {colTwoItem.subtitle}
+                        </p>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -0,0 +1,67 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol!: string;
+    @api body!: string;
+    @api buttonCta?: string;
+    @api buttonHref?: string;
+    @api buttonIcon?: string;
+    @api buttonIconSize?: string = "large";
+    @api colTwoTitle!: string;
+    @api href!: string;
+    @api label!: string;
+    @api target?: string;
+    @api terms!: string;
+    @api title!: string;
+
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    @api
+    get colTwoDetails() {
+        return this._colTwoDetails;
+    }
+    set colTwoDetails(value) {
+        this._colTwoDetails = toJson(value);
+    }
+
+    private _details!: [{ title: string; subtitle: string }];
+    private _colTwoDetails!: string[];
+    private stickyCloseObserver!: IntersectionObserver;
+
+    renderedCallback(): void {
+        this.observeStickyClose();
+    }
+
+    disconnectedCallback(): void {
+        this.stickyCloseObserver.disconnect();
+    }
+
+    private observeStickyClose() {
+        const el = this.template.querySelector(".button-container");
+        if (el && !this.stickyCloseObserver) {
+            this.stickyCloseObserver = new IntersectionObserver(
+                ([e]) => {
+                    e.target.classList.toggle(
+                        "is-sticky",
+                        e.intersectionRatio < 1
+                    );
+                },
+                { threshold: [1] }
+            );
+            this.stickyCloseObserver.observe(el);
+        }
+    }
+
+    private handleModalClose() {
+        this.dispatchEvent(new CustomEvent("togglemodal"));
+    }
+}

package/src/modules/dx/modal/modal.css

@@ -2,38 +2,21 @@
     --dx-c-modal-drawer-z-index: 5000;
 }
 
-dx-button {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-smd);
-    margin: 10px 10px 10px auto;
-    --dx-c-button-background-color: white;
-}
-
-dx-button,
-slot {
-    pointer-events: all;
-}
-
 .modal-drawer_container {
     display: none;
 }
 
-.modal-wrapper {
-    display: grid;
-    flex-direction: column;
-    margin: 0 var(--dx-g-spacing-mlg);
-}
-
 .modal-drawer_container.modal-drawer_active {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     display: grid;
     justify-content: center;
     align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
     z-index: var(--dx-c-modal-drawer-z-index);
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
     pointer-events: none;
 }
 
@@ -49,17 +32,3 @@ slot {
     width: 100%;
     z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
 }
-
-.sticky {
-    background-color: var(--dx-g-gray-95);
-    border-bottom: 1px solid var(--dx-g-gray-80);
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-@media screen and (max-width: 768px) {
-    .modal-wrapper {
-        max-width: 550px;
-    }
-}

package/src/modules/dx/modal/modal.html

@@ -1,17 +1,6 @@
 <template>
     <div class={containerClass}>
-        <div class="modal-wrapper">
-            <div class="button-container">
-                <dx-button
-                    variant="secondary"
-                    icon-symbol="close"
-                    onclick={handleCloseModal}
-                >
-                    Close
-                </dx-button>
-            </div>
-            <slot></slot>
-        </div>
+        <slot></slot>
     </div>
     <div
         if:true={open}

package/src/modules/dx/modal/modal.ts

@@ -22,25 +22,6 @@ export default class Modal extends LightningElement {
 
     handleCloseModal() {
         this._open = !this._open;
-        this.dispatchEvent(new CustomEvent("clickclose"));
-    }
-
-    private handleScroll = () => {
-        const buttonContainer =
-            this.template.querySelector(".button-container")!;
-
-        if (window.scrollY >= buttonContainer.clientHeight / 2) {
-            buttonContainer.classList.add("sticky");
-        } else {
-            buttonContainer.classList.remove("sticky");
-        }
-    };
-
-    renderedCallback() {
-        window.addEventListener("scroll", this.handleScroll);
-    }
-
-    disconnectedCallback(): void {
-        window.removeEventListener("scroll", this.handleScroll);
+        this.dispatchEvent(new CustomEvent("togglemodal"));
     }
 }