Update price-calculator component with new checkboxes and tasks

src/app/price-calculator/price-calculator.component.html

@@ -1,4 +1,4 @@
-<form>
+<!--<form>
   <mat-form-field>
     <mat-label>Tipo de empresa</mat-label>
     <mat-select>
@@ -7,4 +7,39 @@
       }
     </mat-select>
   </mat-form-field>
-</form>
+
+  <div class="list-none">
+
+    <mat-checkbox color="primary">Módulo Base</mat-checkbox>
+    <ul>
+      <li><mat-checkbox color="primary">Base.1</mat-checkbox></li>
+    </ul>
+  </div>
+</form>-->
+
+
+
+<section class="example-section">
+  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
+  <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
+</section>
+
+<section class="example-section">
+  <span class="example-list-section">
+    <mat-checkbox class="example-margin" [checked]="allComplete" [color]="task.color" [indeterminate]="someComplete()"
+      (change)="setAll($event.checked)">
+      {{task.name}}
+    </mat-checkbox>
+  </span>
+  <span>
+    <ul>
+      @for (subtask of task.subtasks; track subtask) {
+      <li>
+        <mat-checkbox [(ngModel)]="subtask.completed" [color]="subtask.color" (ngModelChange)="updateAllComplete()">
+          {{subtask.name}}
+        </mat-checkbox>
+      </li>
+      }
+    </ul>
+  </span>
+</section>

src/app/price-calculator/price-calculator.component.scss

@@ -0,0 +1,12 @@
+.example-section {
+  margin: 12px 0;
+}
+
+.example-margin {
+  margin: 0 12px;
+}
+
+ul {
+  list-style-type: none;
+  margin-top: 4px;
+}

src/app/price-calculator/price-calculator.component.ts

@@ -3,16 +3,24 @@ import { FormsModule } from "@angular/forms";
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
-
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ThemePalette } from '@angular/material/core';
 interface CompanyType {
   name: string;
   value: number;
 }
 
+export interface Task {
+  name: string;
+  completed: boolean;
+  color: ThemePalette;
+  subtasks?: Task[];
+}
+
 @Component({
   selector: 'app-price-calculator',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
+  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule, MatCheckboxModule],
   templateUrl: './price-calculator.component.html',
   styleUrl: './price-calculator.component.scss'
 })
@@ -21,5 +29,35 @@ interface CompanyType {
 export class PriceCalculatorComponent {
   companyTypes: CompanyType[] = [{ name: "Trabalhador Independente", value: 1 }, { name: "Startup", value: 2 }, { name: "PME", value: 3 }, { name: "Grande Empresa", value: 4 }];
 
+  task: Task = {
+    name: 'Indeterminate',
+    completed: false,
+    color: 'primary',
+    subtasks: [
+      { name: 'Primary', completed: false, color: 'primary' },
+      { name: 'Accent', completed: false, color: 'accent' },
+      { name: 'Warn', completed: false, color: 'warn' },
+    ],
+  };
+
+  allComplete: boolean = false;
+
+  updateAllComplete() {
+    this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);
+  }
+
+  someComplete(): boolean {
+    if (this.task.subtasks == null) {
+      return false;
+    }
+    return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete;
+  }
 
+  setAll(completed: boolean) {
+    this.allComplete = completed;
+    if (this.task.subtasks == null) {
+      return;
+    }
+    this.task.subtasks.forEach(t => (t.completed = completed));
+  }
 }