savings - work in progress (#1793)

* savings - work in progress * wip * wip * savings * Fix for main slot * Update savings.ts * wip --------- Co-authored-by: Ghanipour, Aram <aram.ghanipour@seb.se> Co-authored-by: astrit <am@astrit.co>
seb-oss · Nov 14, 2024 · 648febe · 648febe
1 parent bc7d3b2
commit 648febe
Show file tree

Hide file tree

Showing 4 changed files with 444 additions and 4 deletions.
diff --git a/apps/core-lib-dev/src/app/app.element.ts b/apps/core-lib-dev/src/app/app.element.ts
@@ -57,7 +57,7 @@ export class AppElement extends LitElement {
   popoverOpen: boolean = false
 
   @state()
-  currentView = 'theme-page'
+  currentView = 'dashboard'
 
   connectedCallback() {
     super.connectedCallback()

diff --git a/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts b/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts
@@ -27,6 +27,7 @@ import '../../components/todos'
 import './dashboard.css'
 import '../../components/savings-outside'
 import '../../components/savings-goal'
+import '../../components/savings'
 import '../../components/accounts'
 import '../../components/carousel-trans'
 import '../../components/cards'
@@ -84,6 +85,13 @@ export class CardExample extends LitElement {
         <gds-card max-width="max-content">
           <tp-quicklinks></tp-quicklinks>
         </gds-card>
+
+        <!-- <gds-grid columns="2" gap="l">
+          <tp-savings></tp-savings>
+        </gds-grid> -->
+
+        <tp-savings></tp-savings>
+
         <tp-news-widget></tp-news-widget>
       </gds-flex>
     `

diff --git a/apps/core-lib-dev/src/common/card.ts b/apps/core-lib-dev/src/common/card.ts
@@ -20,6 +20,9 @@ export class TPCard extends LitElement {
   @state()
   footerSlotOccupied = false
 
+  @state()
+  mainSlotOccupied = false
+
   connectedCallback() {
     super.connectedCallback()
   }
@@ -30,6 +33,11 @@ export class TPCard extends LitElement {
 
   render() {
     return html`
+      <style>
+        .main-slot {
+          display: ${this.mainSlotOccupied ? 'block' : 'none'};
+        }
+      </style>
       <gds-card background="secondary" padding="0" shadow="s">
         <gds-flex
           flex-direction="column"
@@ -44,9 +52,7 @@ export class TPCard extends LitElement {
             <slot name="header"></slot>
             <slot name="action"></slot>
           </gds-flex>
-          <gds-flex flex-direction="column" gap="m">
-            <slot></slot>
-          </gds-flex>
+          ${this.#renderMainSlot()}
         </gds-flex>
         ${this.#renderFooterSlot()}
       </gds-card>
@@ -76,4 +82,22 @@ export class TPCard extends LitElement {
           (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ''),
       )
   }
+
+  #renderMainSlot() {
+    return html`<gds-flex class="main-slot" flex-direction="column" gap="m">
+      <slot @slotchange=${this.#handleMainSlotChange}></slot>
+    </gds-flex>`
+  }
+
+  #handleMainSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement
+    const assignedNodes = slot.assignedNodes({ flatten: true })
+    this.mainSlotOccupied =
+      assignedNodes.length > 0 &&
+      assignedNodes.some(
+        (node) =>
+          node.nodeType === Node.ELEMENT_NODE ||
+          (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ''),
+      )
+  }
 }