refactor: hide details, expose maxWidth

projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.html

@@ -1,10 +1,8 @@
-<mw-title-bar-base-money [amount]="amount()" [amountProps]="amountProps()">
+<mw-title-bar-base-money [amount]="amount()" [amountProps]="amountProps">
     <mw-typography
         [ellipsis]="true"
-        maxWidth="19rem"
+        [maxWidth]="maxWidth()"
         color="var(--mw-gray-500)"
-        [letterSpacing]="categoryProps().letterSpacing"
-        [lineHeight]="categoryProps().lineHeight"
-        [size]="categoryProps().size"
+        size="1.6rem"
     >{{category()}}</mw-typography>
 </mw-title-bar-base-money>

projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.ts

@@ -1,27 +1,20 @@
 import { Component, input } from '@angular/core';
-import { TitleBarComponent } from './../../atoms/title-bar/title-bar.component'
-import { MoneyTextComponent } from './../money-text/money-text.component';
 import { TypographyComponent } from './../../atoms/typography/typography.component'
 import { TitleBarBaseMoneyComponent } from "../title-bar-base-money/title-bar-base-money.component";
 
 @Component({
   selector: 'mw-title-bar-category',
   standalone: true,
-  imports: [TitleBarComponent, MoneyTextComponent, TypographyComponent, TitleBarBaseMoneyComponent],
+  imports: [TypographyComponent, TitleBarBaseMoneyComponent],
   templateUrl: './title-bar-category.component.html',
   styleUrl: './title-bar-category.component.css'
 })
 export class TitleBarCategoryComponent {
   amount = input(0);
   category = input('');
-  categoryProps = input({
-    ellipsis: true,
-    letterSpacing: '0.5px',
+  maxWidth = input('19rem')
+  protected amountProps = {
     lineHeight: null,
     size: '1.6rem',
-  });
-  amountProps = input({
-    lineHeight: null,
-    size: '1.6rem',
-  });
+  };
 }