# Object Page

## Component nesting

- Vertical Layout
    - Details
      - Floating layout with Key Value Facets
    - Anchor Nav
      - Single entity section
        - Toolbar (inside section slot)
          - Edit button
        - Multiple Block Layouts
          - Up to three Form Layouts per Block Layout
      - List entity section
        - Toolbar (inside section slot; connected to Grid)
          - Filter input
          - Batch delete Button
          - Add Button
        - Grid

## Implementation

### Template

```html
<mate-vertical-layout-ng theme="spacing" style="align-items: stretch;">
    <mate-breadcrumbs-ng theme="padding">
      <mate-breadcrumb-ng> </mate-breadcrumb-ng>
    </mate-breadcrumbs-ng>
    <mate-details-ng titleText="Max Mustermann" theme="object-header">
    <mate-floating-layout-ng>
      <mate-facet-list-ng>
        <mate-facet-ng key-text="Person Nr.">1234567</mate-facet-ng>
        <mate-facet-ng key-text="Geburtsdatum">15.06.1952</mate-facet-ng>
      </mate-facet-list-ng>
      <mate-facet-list-ng>
        <mate-facet-ng key-text="Anrede">Herr</mate-facet-ng>
        <mate-facet-ng key-text="Vorname">Max</mate-facet-ng>
        <mate-facet-ng key-text="Nachname">Mustermann</mate-facet-ng>
      </mate-facet-list-ng>
    </mate-floating-layout-ng>
  </mate-details-ng>
  <mate-anchor-nav-ng theme="expand-last">
    <mate-anchor-nav-section-ng title="Personendaten">
      <mate-toolbar-ng slot="header" title-text="Personendaten" theme="section">
        <mate-button-ng>Bearbeiten</mate-button-ng>
      </mate-toolbar-ng>
      <mate-block-layout-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Person Nr.">1234567</mate-facet-ng>
          <mate-facet-ng key-text="Geburtsdatum">15.06.1952</mate-facet-ng>
        </mate-facet-list-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Anrede">Herr</mate-facet-ng>
          <mate-facet-ng key-text="Vorname">Max</mate-facet-ng>
          <mate-facet-ng key-text="Nachname">Mustermann</mate-facet-ng>
        </mate-facet-list-ng>
      </mate-block-layout-ng>
    </mate-anchor-nav-section-ng>
    <hr />
    <mate-anchor-nav-section-ng title="Adresse">
      <mate-toolbar-ng slot="header" title-text="Adresse" theme="section">
        <mate-button-ng>Bearbeiten</mate-button-ng>
      </mate-toolbar-ng>
      <mate-block-layout-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="Strasse">Musterstrasse</mate-facet-ng>
          <mate-facet-ng key-text="Hausnummer">1</mate-facet-ng>
        </mate-facet-list-ng>
        <mate-facet-list-ng>
          <mate-facet-ng key-text="PLZ">12345</mate-facet-ng>
          <mate-facet-ng key-text="Ort">Musterhausen</mate-facet-ng>
          <mate-facet-ng key-text="Land">Deutschland</mate-facet-ng>
        </mate-facet-list-ng>
      </mate-block-layout-ng>
    </mate-anchor-nav-section-ng>
    <hr />  
    <mate-anchor-nav-section-ng title="Kinder">
      <mate-toolbar-ng slot="header" title-text="Kinder" theme="section">
        <mate-button-ng>Loeschen</mate-button-ng>
      </mate-toolbar-ng>
      <mate-grid-ng [items]="childrenItems">
        <mate-grid-sort-column-ng header="Vorname" path="prename" [resizable]="true"></mate-grid-sort-column-ng>
        <mate-grid-sort-column-ng header="Nachname" path="familyName" [resizable]="true"></mate-grid-sort-column-ng>
      </mate-grid-ng>
    </mate-anchor-nav-section-ng>
  </mate-anchor-nav-ng>
</mate-vertical-layout-ng>
```

### Component

```typescript
@Component({
  selector: 'app-object-page',
  standalone: true,
  imports: [
    MateDetailsComponent,
    MateFacetComponent,
    MateFacetListComponent,
    MateAnchorNavComponent,
    MateAnchorNavSectionComponent,
    MateToolbarComponent,
    MateButtonComponent,
    MateGridComponent,
    MateGridSortColumnComponent,
  ],
  templateUrl: './object-page.component.html',
})
export class ObjectPageComponent {
  childrenItems = childrenData;
}