@salesforcedevs/dx-components 1.3.57 → 1.3.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.57",
+    "version": "1.3.62",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "c5665d11db012d608e965c52cd0c332d15852392"
+    "gitHead": "ae140d6107e6c61bc6bab73dafa283bd6c52b184"
 }

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

@@ -3,6 +3,7 @@
         if:true={hasTwoButtons}
         open={_modalOpen}
         ontogglemodal={toggleModal}
+        onclosemodal={closeModal}
     >
         <dx-card-trial-expanded
             badge-background-color={badgeBackgroundColor}
@@ -21,7 +22,8 @@
             target={target}
             terms={terms}
             title={title}
-            ontogglemodal={toggleModal}
+            type-badge-value={modalTypeBadgeValue}
+            type-badge-dark={modalTypeBadgeDark}
         ></dx-card-trial-expanded>
     </dx-modal>
     <div class="recommended-container" if:true={recommended}>

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

@@ -35,6 +35,8 @@ export default class CardTrial extends LightningElement {
     @api typeBadgeColor?: string;
     @api typeBadgeSize?: string = "default";
     @api typeBadgeDark?: boolean = false;
+    @api modalTypeBadgeValue?: string;
+    @api modalTypeBadgeDark?: boolean;
 
     @api
     get details() {
@@ -98,6 +100,10 @@ export default class CardTrial extends LightningElement {
         this._modalOpen = !this._modalOpen;
     }
 
+    private closeModal() {
+        this._modalOpen = false;
+    }
+
     private handleClick(e: PointerEvent) {
         // card is clickable only if it doesn't contain buttons (for accessibility reasons)
         if (!this.hasButtons) {

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

@@ -19,6 +19,11 @@
     pointer-events: all;
 }
 
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
 .badge-main {
     --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
     --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);

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

@@ -10,14 +10,21 @@
                 Close
             </dx-button>
         </div>
-        <div class="content-container">
+        <div class="content-container" tabindex="0" onkeydown={handleKeyDown}>
             <div class="col-one">
-                <dx-icon-badge
-                    class="badge-main"
-                    background-color={badgeBackgroundColor}
-                    symbol={badgeSymbol}
-                    sprite={badgeSprite}
-                ></dx-icon-badge>
+                <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}
+                        dark={typeBadgeDark}
+                    ></dx-type-badge>
+                </div>
                 <dx-card-title
                     class="title-main"
                     href={href}
@@ -73,9 +80,7 @@
                                 for:each={colTwoItem.bullets}
                                 for:item="bullet"
                             >
-                                <li key={colTwoItem.bullet} class="bullet">
-                                    {bullet}
-                                </li>
+                                <li key={bullet} class="bullet">{bullet}</li>
                             </template>
                         </ul>
                     </div>

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

@@ -17,6 +17,8 @@ export default class CardTrial extends LightningElement {
     @api target?: string;
     @api terms!: string;
     @api title!: string;
+    @api typeBadgeValue?: string;
+    @api typeBadgeDark?: boolean = false;
 
     @api
     get details() {
@@ -75,8 +77,20 @@ export default class CardTrial extends LightningElement {
         }
     }
 
+    private handleModalToggle() {
+        this.dispatchEvent(
+            new CustomEvent("togglemodal", {
+                bubbles: true
+            })
+        );
+    }
+
     private handleModalClose() {
-        this.dispatchEvent(new CustomEvent("togglemodal"));
+        this.dispatchEvent(
+            new CustomEvent("closemodal", {
+                bubbles: true
+            })
+        );
     }
 
     private handleSignUpClick(e: PointerEvent) {

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

@@ -5,6 +5,6 @@
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleToggleModal}
+        onclick={handleCloseModal}
     ></div>
 </template>

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

@@ -39,7 +39,7 @@ export default class Modal extends LightningElement {
 
     handleKeyDown(event: KeyboardEvent): void {
         if (event.key === "Escape") {
-            this.handleToggleModal();
+            this.handleCloseModal();
         }
     }
 
@@ -47,4 +47,9 @@ export default class Modal extends LightningElement {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }
+
+    handleCloseModal() {
+        this._open = false;
+        this.dispatchEvent(new CustomEvent("closemodal"));
+    }
 }

package/src/modules/dx/tabPanelItem/tabPanelItem.html

@@ -8,7 +8,7 @@
         aria-controls={panelId}
         aria-label="Tab button"
         aria-selected={active}
-        tabindex={index}
+        tabindex="0"
     >
         <slot></slot>
     </button>