diff --git a/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.css b/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.css new file mode 100644 index 0000000..fc1ccda --- /dev/null +++ b/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; +} diff --git a/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.html b/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.html new file mode 100644 index 0000000..1a90dfc --- /dev/null +++ b/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 @@ +
+ @if(showCheckBox()) { +
+ +
+ } +
+
+ +
+
+ + {{whom()}} + {{category()}} + {{description()}} + +
+
+ + +
+
+
\ No newline at end of file diff --git a/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.spec.ts b/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.spec.ts new file mode 100644 index 0000000..f1f4ae4 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ExpenseIncomeCategoryByAccountDetailComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ExpenseIncomeCategoryByAccountDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.ts b/projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.ts new file mode 100644 index 0000000..2929a8e --- /dev/null +++ b/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(); + showCheckBox = input(false); +}