Merge branch 'main' into task/reuse-toggle-component-on-holdings-page

CHANGELOG.md

@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Reused the toggle component on the portfolio holdings page
+- Extended the toggle component to support a disabled state
 - Extended the toggle component to support icons
+- Reused the toggle component on the portfolio holdings page
 
 ## 3.46.0 - 2026-08-09
 

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -848,13 +848,12 @@ export class GfAssetProfileDialogComponent implements OnInit {
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(({ price }) => {
+        const currency = this.assetProfileForm.controls.currency.value;
+
         this.notificationService.alert({
-          title:
+          title: `${$localize`The current market price is`} ${price}${
-            $localize`The current market price is` +
+            currency ? ` ${currency}` : ''
-            ' ' +
+          }`
-            price +
-            ' ' +
-            this.assetProfileForm.controls.currency.value
         });
       });
   }

libs/ui/src/lib/carousel/carousel.component.html

@@ -1,4 +1,4 @@
-@if (this.showPrevArrow) {
+@if (showPrevArrow) {
   <button
     aria-hidden="true"
     aria-label="previous"
@@ -17,7 +17,7 @@
   </div>
 </div>
 
-@if (this.showNextArrow) {
+@if (showNextArrow) {
   <button
     aria-hidden="true"
     aria-label="next"

libs/ui/src/lib/toggle/toggle.component.html

@@ -9,9 +9,11 @@
       [class]="{
         'cursor-default': option.value === optionFormControl.value,
         'cursor-pointer':
-          !isLoading() && option.value !== optionFormControl.value
+          !isDisabled() &&
+          !isLoading() &&
+          option.value !== optionFormControl.value
       }"
-      [disabled]="isLoading()"
+      [disabled]="isDisabled() || isLoading()"
       [title]="option.title ?? ''"
       [value]="option.value"
     >

libs/ui/src/lib/toggle/toggle.component.scss

@@ -9,6 +9,14 @@
       background-color: rgba(var(--dark-dividers));
     }
 
+    &.mat-mdc-radio-disabled {
+      ::ng-deep {
+        label {
+          color: rgba(var(--dark-disabled-text));
+        }
+      }
+    }
+
     ::ng-deep {
       .mdc-radio {
         display: none;
@@ -31,6 +39,14 @@
       border: 1px solid rgba(var(--light-disabled-text));
     }
 
+    &.mat-mdc-radio-disabled {
+      ::ng-deep {
+        label {
+          color: rgba(var(--light-disabled-text));
+        }
+      }
+    }
+
     ::ng-deep {
       label {
         color: rgba(var(--light-primary-text), 1);

libs/ui/src/lib/toggle/toggle.component.stories.ts

@@ -26,6 +26,22 @@ type Story = StoryObj<GfToggleComponent>;
 export const Default: Story = {
   args: {
     defaultValue: '1d',
+    isDisabled: false,
+    isLoading: false,
+    options: [
+      { label: 'Today', value: '1d' },
+      { label: 'YTD', value: 'ytd' },
+      { label: '1Y', value: '1y' },
+      { label: '5Y', value: '5y' },
+      { label: 'Max', value: 'max' }
+    ]
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: '1d',
+    isDisabled: true,
     isLoading: false,
     options: [
       { label: 'Today', value: '1d' },
@@ -40,6 +56,7 @@ export const Default: Story = {
 export const WithIcons: Story = {
   args: {
     defaultValue: 'TABLE',
+    isDisabled: false,
     isLoading: false,
     options: [
       {

libs/ui/src/lib/toggle/toggle.component.ts

@@ -20,6 +20,7 @@ import { IonIcon } from '@ionic/angular/standalone';
 })
 export class GfToggleComponent {
   public readonly defaultValue = input.required<string>();
+  public readonly isDisabled = input<boolean>(false);
   public readonly isLoading = input<boolean>(false);
   public readonly options = input<ToggleOption[]>([]);