docs(main-detail-container): move configuration controls into card

playwright/e2e/element-examples/si-main-detail-container.spec.ts

@@ -9,7 +9,7 @@ test.describe('si-main-detail-container', () => {
 
   test(example, async ({ page, si }) => {
     await si.visitExample(example);
-    await expect(page.getByText('Max Meier 8')).toHaveCount(1);
+    await expect(page.getByText('Max Meier 5')).toHaveCount(1);
     await si.runVisualAndA11yTests(undefined, {
       axeRulesSet: [{ id: 'scrollable-region-focusable', enabled: false }]
     });

playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml

@@ -36,18 +36,12 @@
       - cell "Max Meier 6"
       - cell "Engineer"
       - cell "Great Company 1"
-    - row "Max Meier 7 Installer Great Company 2":
-      - cell "Max Meier 7"
-      - cell "Installer"
-      - cell "Great Company 2"
-    - row "Max Meier 8 Engineer Great Company 3":
-      - cell "Max Meier 8"
-      - cell "Engineer"
-      - cell "Great Company 3"
 - text: Details
 - button "Toggle"
 - text: No entity selected.
-- checkbox "Resizable Parts" [checked]
-- text: Resizable Parts
+- separator
+- text: Settings
+- checkbox "Resizable parts" [checked]
+- text: Resizable parts
 - checkbox "Simulate mobile layout"
 - text: Simulate mobile layout

src/app/examples/si-main-detail-container/si-main-detail-container-block.html

@@ -12,7 +12,6 @@
   (hasLargeSizeChange)="isLarge = $event"
   (mainContainerWidthChange)="table.recalculate()"
 >
-  >
   <si-search-bar
     slot="mainSearch"
     placeholder="Search"
@@ -67,25 +66,32 @@
   </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
-  </div>
-</form>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
+    </div>
+  </form>
+</div>

src/app/examples/si-main-detail-container/si-main-detail-container-block.ts

@@ -4,12 +4,14 @@
  */
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -22,12 +24,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container-block.html',
   styleUrl: './si-main-detail-container-block.scss',

src/app/examples/si-main-detail-container/si-main-detail-container.html

@@ -72,25 +72,32 @@
   </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
-  </div>
-</form>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
+    </div>
+  </form>
+</div>

src/app/examples/si-main-detail-container/si-main-detail-container.ts

@@ -10,12 +10,14 @@ import {
   inject,
   viewChild
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -28,12 +30,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container.html',
   styleUrl: './si-main-detail-container.scss',