git init v2

src/app/components/new-item/new-item.component.html

@@ -0,0 +1,150 @@
+<form [formGroup]="testForm">
+  <tui-input formControlName="title">
+    Titel
+    <input
+      tuiTextfieldLegacy
+      formControlName="title"
+      type="text"
+    />
+  </tui-input>
+  <div
+    *ngIf="testForm.get('title').value == ''"
+    tuiGroup
+    class="group"
+    [collapsed]="true">
+    <button
+      *ngFor="let action of quickActions"
+      appearance="outline"
+      tuiButton
+      size="s"
+      (click)="addAction(action)"
+      type="button">{{ action }}
+    </button>
+  </div>
+
+  <br>
+  <div class="toolbar">
+    <tui-combo-box
+      [formControl]="control"
+      [stringify]="stringify"
+      tuiTextfieldSize="m">
+      Klant
+      <tui-data-list-wrapper
+        *tuiDataList
+        [itemContent]="stringify | tuiStringifyContent"
+        [items]="items | tuiFilterByInput"
+      />
+    </tui-combo-box>
+    <button
+      size="m"
+      tuiButton
+      (click)="toggleCustomerModal()"
+      iconStart="@tui.plus"
+      type="button">
+    </button>
+  </div>
+  <br>
+  <div
+    tuiGroup
+    class="group"
+  >
+    <div>
+      <tui-input-date
+        formControlName="date"
+        tuiTextfieldSize="m"
+        class="tui-space_vertical-4"
+        [tuiTextfieldLabelOutside]="false"
+      >
+        Datum
+      </tui-input-date>
+    </div>
+    <div>
+      <tui-input-time
+        formControlName="startTime"
+        tuiTextfieldSize="m"
+        class="tui-space_top-2"
+        [tuiTextfieldLabelOutside]="false">
+        Van
+      </tui-input-time>
+    </div>
+    <div>
+      <tui-input-time
+        formControlName="endTime"
+        tuiTextfieldSize="m"
+        class="tui-space_top-2"
+        [tuiTextfieldLabelOutside]="false"
+      >
+        Tot
+      </tui-input-time>
+    </div>
+  </div>
+  <br>
+  <tui-textarea formControlName="notes">Notities</tui-textarea>
+</form>
+<br>
+<button
+  size="m"
+  tuiButton
+  type="button" (click)="registerAppointment()"
+  [tuiAppearanceState]="formIsValid()">
+  Afspraak maken
+</button>
+
+<app-modal title="Nieuwe klant" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
+  <form [formGroup]="customerForm">
+    <tui-input
+      formControlName="firstName"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Voornaam
+      <input
+        tuiTextfieldLegacy
+        type="text"
+        formControlName="firstName"
+      />
+    </tui-input>
+    <br>
+
+    <tui-input
+      formControlName="lastName"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Achternaam
+      <input
+        tuiTextfieldLegacy
+        type="text"
+        formControlName="lastName"
+      />
+    </tui-input>
+    <br>
+    <tui-input
+      formControlName="email"
+      tuiTextfieldSize="m"
+      [tuiTextfieldCleaner]="true"
+    >
+      Email
+      <input
+        tuiTextfieldLegacy
+        autocomplete="email"
+        type="email"
+        formControlName="email"
+      />
+    </tui-input>
+    <br>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      [loading]=waiting
+      (click)="saveCustomer()"
+      type="button">
+      <tui-icon
+        icon="@tui.plus"
+        [style.height.rem]="1"
+      />
+      Klant toevoegen
+    </button>
+  </form>
+</app-modal>