feat: add expense income detail comp for account list

projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.css

@@ -0,0 +1,35 @@
+.detail {
+  display: grid;
+  grid-template-columns: 
+    4rem
+    1fr
+    minmax(auto, 30%);
+  width: 100%;
+}
+
+.icon {
+    align-self: center;
+    height: 4rem;
+    width: 4rem;
+}
+
+.amount {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    overflow: hidden;
+}
+
+.amount mw-money-text:last-of-type {
+    align-items: flex-start;
+}
+
+.income-category-detail__checkbox {
+    align-items: center;
+    display: flex;
+    margin: 4px;
+}
+
+.income-category-detail__container {
+    display: flex;
+}

projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.html

@@ -0,0 +1,39 @@
+<div class="income-category-detail__container">
+    @if(showCheckBox()) {
+        <div class="income-category-detail__checkbox">
+            <mw-checkbox (checked)="checked.emit($event)"></mw-checkbox>
+        </div>
+    }
+    <div class="detail">
+        <div class="icon">
+            <mw-circled-icon
+                [symbol]="iconProps().symbol"
+                [backgroundColor]="iconProps().backgroundColor"
+                [color]="iconProps().color"
+            ></mw-circled-icon>
+        </div>
+        <div>
+        <mw-expense-icome-detail-box>
+            <mw-typography
+                color="var(--mw-gray-500)"
+                size="1.2rem"
+                weight="800"
+            >{{whom()}}</mw-typography>
+            <mw-typography
+                color="var(--mw-gray-500)"
+                size="1.2rem"
+            >{{category()}}</mw-typography>
+            <mw-typography
+                color="var(--mw-gray-400)"
+                size="1.1rem"
+                font="var(--mw-font-light-italic)"
+                weight="800"
+            >{{description()}}</mw-typography>
+        </mw-expense-icome-detail-box>
+        </div>
+        <div class="amount">
+            <mw-money-text  [color]="amountProps().color" [amount]="amountProps().amount"></mw-money-text>
+            <mw-money-text  size="1rem" color="var(--mw-gray-300)" [amount]="acumAmount()"></mw-money-text>
+        </div>
+    </div>
+</div>

projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpenseIncomeCategoryByAccountDetailComponent } from './expense-income-category-by-account-detail.component';
+
+describe('ExpenseIncomeCategoryByAccountDetailComponent', () => {
+  let component: ExpenseIncomeCategoryByAccountDetailComponent;
+  let fixture: ComponentFixture<ExpenseIncomeCategoryByAccountDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ExpenseIncomeCategoryByAccountDetailComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ExpenseIncomeCategoryByAccountDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.ts

@@ -0,0 +1,27 @@
+import { Component, input, output } from '@angular/core';
+import { MoneyTextComponent } from '../money-text/money-text.component';
+import { ExpenseIcomeDetailBoxComponent } from '../../atoms/expense-icome-detail-box/expense-icome-detail-box.component';
+import { CircledIconComponent } from '../circled-icon/circled-icon.component';
+import { TypographyComponent } from '../../atoms';
+import { AbstractExpenseIncomeDetailComponent } from '../abstract-expense-income-detail/abstract-expense-income-detail.component';
+import { CheckboxComponent } from '../../atoms/checkbox/checkbox.component';
+
+@Component({
+  selector: 'mw-expense-income-category-by-account-detail',
+  standalone: true,
+  imports: [
+    CheckboxComponent,
+    CircledIconComponent, 
+    ExpenseIcomeDetailBoxComponent, 
+    MoneyTextComponent, 
+    TypographyComponent,
+  ],
+  templateUrl: './expense-income-category-by-account-detail.component.html',
+  styleUrl: './expense-income-category-by-account-detail.component.css'
+})
+export class ExpenseIncomeCategoryByAccountDetailComponent extends AbstractExpenseIncomeDetailComponent {
+  acumAmount = input(0);
+  category = input('');  
+  checked = output<boolean>();
+  showCheckBox = input(false);
+}