- @if (isLoading || summary?.emergencyFund?.cash > 0) {
+ @if (hasCashBreakdown && isCashExpanded) {
Buying Power
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
index 6feaa22d1..534976f11 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
@@ -1,6 +1,19 @@
:host {
display: block;
+ .caret-container {
+ width: 1rem;
+
+ .caret {
+ font-size: 0.7rem;
+ transition: transform 150ms ease-in-out;
+
+ &.caret-expanded {
+ transform: rotate(90deg);
+ }
+ }
+ }
+
.indent-1 {
margin-left: 1rem;
}
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
index eaf71210f..eac5ef9a6 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
@@ -18,6 +18,7 @@ import { IonIcon } from '@ionic/angular/standalone';
import { formatDistanceToNow } from 'date-fns';
import { addIcons } from 'ionicons';
import {
+ caretForwardOutline,
ellipsisHorizontalCircleOutline,
informationCircleOutline
} from 'ionicons/icons';
@@ -47,13 +48,19 @@ export class GfPortfolioSummaryComponent implements OnChanges {
'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
);
+ protected isCashExpanded = false;
+ protected isHoldingsExpanded = false;
protected precision = 2;
protected timeInMarket: string | undefined;
private readonly notificationService = inject(NotificationService);
public constructor() {
- addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
+ addIcons({
+ caretForwardOutline,
+ ellipsisHorizontalCircleOutline,
+ informationCircleOutline
+ });
}
protected get cashPercentage() {
@@ -77,6 +84,14 @@ export class GfPortfolioSummaryComponent implements OnChanges {
: 0;
}
+ protected get hasCashBreakdown() {
+ return !this.isLoading && this.summary?.emergencyFund?.cash > 0;
+ }
+
+ protected get hasHoldingsBreakdown() {
+ return !this.isLoading && this.summary?.emergencyFund?.assets > 0;
+ }
+
protected get holdingsInBaseCurrency() {
if (
!isNumber(this.summary?.totalAssetsInBaseCurrency) ||
@@ -145,4 +160,12 @@ export class GfPortfolioSummaryComponent implements OnChanges {
title: $localize`Please set the amount of your emergency fund.`
});
}
+
+ protected onToggleCash() {
+ this.isCashExpanded = !this.isCashExpanded;
+ }
+
+ protected onToggleHoldings() {
+ this.isHoldingsExpanded = !this.isHoldingsExpanded;
+ }
}