@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/entity/components/presentation/list/_entity_-list.component.html.ejs

@@ -0,0 +1,419 @@
+<!-- Generated list component template by CRUDForge -->
+<%
+const collectionRelationships = relationships.filter(rel => ['OneToMany', 'ManyToMany'].includes(rel.type));
+const auditFieldNames = preferences.fields?.audit?.names || ['createdBy', 'createdDate', 'lastModifiedBy', 'lastModifiedDate'];
+const techFieldNames = typeof technicalFieldNames !== 'undefined' ? technicalFieldNames : (preferences.fields?.technical?.enabled === false ? [] : (preferences.fields?.technical?.names || ['debug', 'refType', 'refId']));
+const screenId = typeof entityScreenId !== 'undefined' && entityScreenId ? entityScreenId : toKebabCase(entity.name);
+const aclAttrs = (componentId) => `data-screen-id="${screenId}" data-component-id="${componentId}"`;
+const toSpacedLabel = (str) => {
+  return str.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase());
+};
+const estimateHeaderWidth = (label) => {
+  const normalized = String(label ?? '').trim();
+  // Match tw-hipster sizing with a bit more padding so multi-word headers don't collide.
+  return Math.min(Math.max(normalized.length * 12 + 64, 112), 340);
+};
+%>
+<mat-drawer-container class="absolute h-full w-full bg-transparent">
+
+  <!-- Filter Drawer -->
+  <mat-drawer #filterDrawer mode="over" position="start" class="w-full sm:w-[34rem] max-w-full">
+    <app-<%= toKebabCase(entity.name) %>-filter
+      [activeFilters]="activeFilters"
+      (applied)="handleFiltersApplied($event)"
+      (closed)="handleFilterDrawerClosed()"
+    >
+    </app-<%= toKebabCase(entity.name) %>-filter>
+  </mat-drawer>
+
+  <!-- Main Content (The Table) -->
+  <mat-drawer-content class="flex flex-col">
+    <div #listViewport class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
+
+      <!-- Header (fixed) -->
+      <div class="flex flex-0 flex-col border-b border-slate-200 bg-slate-100 p-6 pb-22 md:flex-row md:items-center md:justify-between md:px-10 md:pb-28 md:pt-12 dark:border-slate-800 dark:bg-slate-900/60">
+        <div class="min-w-0 flex-1">
+          <h2 class="truncate text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl">
+            <%= entity.name.replace(/([A-Z])/g, ' $1').trim() %> Management
+          </h2>
+        </div>
+        
+        <!-- Actions -->
+        <app-<%= toKebabCase(entity.name) %>-actions
+          [searchableColumns]="searchableColumns"
+          [searchBy]="searchBy"
+          [searchTerm]="searchTerm"
+          [searchMode]="searchMode"
+          [viewMode]="viewMode"
+          [filterFieldsLength]="filterFields.length"
+          [columnMenu]="columnPreferenceMenu"
+          [allColumnPreferences]="allColumnPreferences"
+          (searchChange)="handleSearchChanged($event)"
+          (filterClick)="openFilterDrawer()"
+          (viewModeChange)="onViewModeChange($event)"
+          (newClick)="openFormDrawer()"
+        >
+        </app-<%= toKebabCase(entity.name) %>-actions>
+      </div>
+
+      <!-- Main -->
+      <div
+        class="-mt-16 flex min-h-0 flex-auto flex-col overflow-hidden rounded-t-2xl border border-slate-200 bg-white shadow dark:border-slate-800 dark:bg-neutral-950"
+        cdkScrollable
+      >
+        <div class="flex min-h-0 flex-1 flex-col p-6 sm:p-10">
+          
+          <!-- Table View -->
+          @if (viewMode === 'table') {
+            <div #tableWrapper class="-m-6 min-h-0 flex-auto overflow-auto pb-[100px] sm:-m-10" (scroll)="onTableScroll()" cdkScrollable>
+              <table
+                mat-table
+                [dataSource]="isLoading ? skeletonData : dataSource"
+                [trackBy]="trackRow"
+                matSort
+                (matSortChange)="loadData()"
+                cdkDropList
+                cdkDropListOrientation="horizontal"
+                [cdkDropListData]="displayedColumns"
+                (cdkDropListDropped)="drop($event)"
+                class="min-w-full"
+              >
+
+              <!-- Dynamically generate columns for entity fields -->
+              <ng-container matColumnDef="id">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'id'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth('ID') %>px;">ID</th>
+                <td mat-cell *matCellDef="let element" style="min-width: <%= estimateHeaderWidth('ID') %>px;">{{ element.id }}</td>
+              </ng-container>
+              
+              <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef class="w-28">State</th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="flex items-center gap-1.5">
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                    </div>
+                  } @else {
+                    <div class="flex items-center gap-1.5">
+                      <button
+                        mat-icon-button
+                        type="button"
+                        class="h-8 w-8"
+                        (click)="togglePin(element)"
+                        [attr.aria-label]="isPinned(element.id) ? 'Unpin row' : 'Pin row'"
+                        [matTooltip]="isPinned(element.id) ? 'Unpin row' : 'Pin row'"
+                      >
+                        <mat-icon svgIcon="pin" [ngClass]="isPinned(element.id) ? 'text-red-500' : 'text-neutral-400'"></mat-icon>
+                      </button>
+                      <button
+                        mat-icon-button
+                        type="button"
+                        class="h-8 w-8"
+                        [matMenuTriggerFor]="flagMenu"
+                        (click)="setFlagMenuRow(element)"
+                        aria-label="Set color flag"
+                        matTooltip="Set color flag"
+                      >
+                        <mat-icon svgIcon="flag" [ngClass]="getFlagClass(element.id)"></mat-icon>
+                      </button>
+                    </div>
+                  }
+                </td>
+              </ng-container>
+
+              <% entity.fields.filter(field => !auditFieldNames.includes(field.fieldName) && !techFieldNames.includes(field.fieldName)).forEach(field => {
+                const colMin = estimateHeaderWidth(toSpacedLabel(field.fieldName));
+              %>
+              <ng-container matColumnDef="<%= field.fieldName %>">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'<%= field.fieldName %>'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= colMin %>px;"><%= toSpacedLabel(field.fieldName) %></th>
+                <% if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>
+                <td mat-cell *matCellDef="let element" style="min-width: <%= colMin %>px;">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    {{ element.<%= field.fieldName %>?.toDate() | date: 'medium' }}
+                  }
+                </td>
+                <% } else if (field.fieldType === 'Boolean') { %>
+                  <td mat-cell *matCellDef="let element" style="min-width: <%= colMin %>px;">
+                    @if (isLoading) {
+                      <div class="h-5 w-5 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                    } @else {
+                      @if (element.<%= field.fieldName %> === true) {
+                        <mat-icon svgIcon="circle-check" class="text-emerald-500" matTooltip="True"></mat-icon>
+                      } @else if (element.<%= field.fieldName %> === false) {
+                        <mat-icon svgIcon="circle-x" class="text-rose-500" matTooltip="False"></mat-icon>
+                      } @else {
+                        <mat-icon svgIcon="circle-minus" class="text-neutral-400" matTooltip="Not Set"></mat-icon>
+                      }
+                    }
+                  </td>
+                <% } else { %>
+                <td mat-cell *matCellDef="let element" style="min-width: <%= colMin %>px;">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    <span [innerHTML]="highlightText(element.<%= field.fieldName %>, searchHighlight('<%= field.fieldName %>'))"></span>
+                  }
+                </td>
+                <% } %>
+              </ng-container>
+              <% }); %>
+
+              <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name && ['ManyToOne', 'OneToOne'].includes(rel.type)).forEach(rel => { 
+                   const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+                   const label = rel.from.fieldName ? toSpacedLabel(rel.from.fieldName) : rel.otherEntityNamePascalCase;
+              %>
+              <ng-container matColumnDef="<%= relFieldName %>">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'<%= relFieldName %>'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth(label) %>px;"><%= label %></th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    {{ element.<%= relFieldName %>?.name || element.<%= relFieldName %>?.title || element.<%= relFieldName %>?.id }}
+                  }
+                </td>
+              </ng-container>
+              <% }); %>
+
+              <!-- Generate columns for "Show Children" buttons -->
+              <% collectionRelationships.forEach(rel => { %>
+              <ng-container matColumnDef="actions-<%= rel.otherEntityName %>">
+                <th mat-header-cell cdkDrag *matHeaderCellDef [appResizable]="'actions-<%= rel.otherEntityName %>'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth(toSpacedLabel(rel.otherEntityNamePascalCase)) %>px;"> <%= toSpacedLabel(rel.otherEntityNamePascalCase) %> </th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="flex items-center gap-2">
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                    </div>
+                  } @else {
+                    <button mat-icon-button class="text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-500/10" (click)="show<%= rel.otherEntityNamePascalCase %>(element)" matTooltip="Show <%= rel.otherEntityNamePascalCase %>">
+                      <mat-icon svgIcon="file"></mat-icon>
+                    </button>
+                    <button mat-icon-button class="ml-2 text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-500/10" (click)="add<%= rel.otherEntityNamePascalCase %>(element)" matTooltip="Add <%= rel.otherEntityNamePascalCase %>">
+                      <mat-icon svgIcon="plus"></mat-icon>
+                    </button>
+                  }
+                </td>
+              </ng-container>
+              <% }); %>
+              
+              <!-- Audit Columns -->
+              <% if (entity.fields.some(field => field.fieldName === 'createdBy')) { %>
+              <ng-container matColumnDef="createdBy">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'createdBy'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth('Created By') %>px;">Created By</th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    <span class="text-blue-600 dark:text-blue-400 font-medium" [innerHTML]="highlightText((element.createdBy | auditUserName | async), searchHighlight('createdBy'))"></span>
+                  }
+                </td>
+              </ng-container>
+              <% } %>
+
+              <% if (entity.fields.some(field => field.fieldName === 'createdDate')) { %>
+              <ng-container matColumnDef="createdDate">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'createdDate'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth('Created Date') %>px;">Created Date</th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    <span class="text-slate-500 dark:text-slate-400">{{ element.createdDate?.toDate() | date: 'medium' }}</span>
+                  }
+                </td>
+              </ng-container>
+              <% } %>
+
+              <% if (entity.fields.some(field => field.fieldName === 'lastModifiedBy')) { %>
+              <ng-container matColumnDef="lastModifiedBy">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'lastModifiedBy'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth('Last Modified By') %>px;">Last Modified By</th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    <span class="text-indigo-600 dark:text-indigo-400 font-medium" [innerHTML]="highlightText((element.lastModifiedBy | auditUserName | async), searchHighlight('lastModifiedBy'))"></span>
+                  }
+                </td>
+              </ng-container>
+              <% } %>
+
+              <% if (entity.fields.some(field => field.fieldName === 'lastModifiedDate')) { %>
+              <ng-container matColumnDef="lastModifiedDate">
+                <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header [appResizable]="'lastModifiedDate'" tableId="<%= toKebabCase(entity.name) %>" style="min-width: <%= estimateHeaderWidth('Last Modified Date') %>px;">Last Modified Date</th>
+                <td mat-cell *matCellDef="let element">
+                  @if (isLoading) {
+                    <div class="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+                  } @else {
+                    <span class="text-slate-500 dark:text-slate-400">{{ element.lastModifiedDate?.toDate() | date: 'medium' }}</span>
+                  }
+                </td>
+              </ng-container>
+              <% } %>
+
+              <!-- General Actions Column (Edit/Delete) — tw-hipster stickyEnd pattern -->
+              <ng-container matColumnDef="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef class="mat-column-actions border-l border-neutral-200 font-semibold text-primary whitespace-nowrap z-[100] dark:border-neutral-800" [class.shadow-left]="isActionsShadowVisible" style="min-width: <%= estimateHeaderWidth('Actions') %>px;">Actions</th>
+                <td mat-cell *matCellDef="let element" class="mat-column-actions border-l border-neutral-200 whitespace-nowrap dark:border-neutral-800" [ngClass]="getStickyClass(element)" [class.shadow-left]="isActionsShadowVisible">
+                  @if (isLoading) {
+                    <div class="flex items-center justify-center gap-2">
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <% if (entity.fields.some(f => f.fieldName === 'isActive')) { %>
+                      <div class="h-8 w-8 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                      <% } %>
+                    </div>
+                  } @else {
+                    <div class="flex items-center justify-center gap-0.5">
+                      <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'view') {<% } %>
+<button mat-icon-button class="flex h-8 w-8 items-center justify-center text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-500/10" (click)="viewDetails(element.id)" matTooltip="View Details"  <%- aclAttrs('view') %>>
+                        <mat-icon svgIcon="eye"></mat-icon>
+                      </button>
+<% if (iamAcl) { %>}<% } %>
+                      <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'edit') {<% } %>
+<button mat-icon-button class="flex h-8 w-8 items-center justify-center text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-500/10" (click)="openFormDrawer(element.id)" matTooltip="Edit <%= entity.name %>"  <%- aclAttrs('edit') %>>
+                        <mat-icon svgIcon="square-pen"></mat-icon>
+                      </button>
+<% if (iamAcl) { %>}<% } %>
+                      <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'delete') {<% } %>
+<button mat-icon-button class="flex h-8 w-8 items-center justify-center text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10" (click)="delete(element.id)" matTooltip="Delete <%= entity.name %>"  <%- aclAttrs('delete') %>>
+                        <mat-icon svgIcon="trash"></mat-icon>
+                      </button>
+<% if (iamAcl) { %>}<% } %>
+                      <% if (entity.fields.some(f => f.fieldName === 'isActive')) { %>
+                      <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'toggle-active') {<% } %>
+<button mat-icon-button class="flex h-8 w-8 items-center justify-center" [ngClass]="element.isActive ? 'text-violet-600 hover:bg-violet-50 dark:text-violet-400 dark:hover:bg-violet-500/10' : 'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-500/10'" (click)="toggleActive(element)" matTooltip="{{element.isActive ? 'Deactivate' : 'Activate'}}"  <%- aclAttrs('toggle-active') %>>
+                        <mat-icon svgIcon="{{element.isActive ? 'toggle-right' : 'toggle-left'}}"></mat-icon>
+                      </button>
+<% if (iamAcl) { %>}<% } %>
+                      <% } %>
+                    </div>
+                  }
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></tr>
+              </table>
+              @if (!isLoading && dataSource.data.length === 0) {
+                <div class="cforge-empty-state">No data found.</div>
+              }
+            </div>
+          }
+
+          <!-- Card View -->
+          @if (viewMode === 'card') {
+            @if (isLoading) {
+              <div class="flex items-center justify-center p-8">
+                <mat-progress-spinner [diameter]="40" [mode]="'indeterminate'"></mat-progress-spinner>
+              </div>
+            } @else {
+              <div class="-m-6 min-h-0 flex-auto overflow-y-auto sm:-m-10">
+                <div class="grid grid-cols-1 gap-6 p-6 sm:grid-cols-<%= preferences.ui?.gridCols?.tablet || 2 %> sm:p-10 md:grid-cols-<%= preferences.ui?.gridCols?.desktop || 3 %>">
+                  @for (element of dataSource.data; track element.id) {
+                    <app-<%= toKebabCase(entity.name) %>-card [item]="element" [searchTerm]="searchTerm" [searchBy]="searchBy" [searchMode]="searchMode" [pinned]="isPinned(element.id)" [flagClass]="getFlagClass(element.id)" (editClick)="openFormDrawer($event)" class="block"></app-<%= toKebabCase(entity.name) %>-card>
+                  } @empty {
+                    <div class="cforge-empty-state col-span-full">
+                      No data found.
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          }
+        </div>
+
+        <!-- Paginator -->
+        <mat-paginator
+          class="sticky bottom-0 z-10 flex-0 shrink-0 border-t border-neutral-200 bg-card [&_.mat-mdc-paginator-container]:justify-start"
+          [length]="totalItems"
+          [pageSize]="itemsPerPage"
+          [pageSizeOptions]="[10, 25, 50, 100]"
+        ></mat-paginator>
+      </div>
+
+      <button
+        mat-flat-button
+        color="primary"
+        type="button"
+        class="fixed bottom-6 right-6 z-40 h-12 rounded-full px-4 shadow-lg"
+        [matMenuTriggerFor]="exportMenu"
+        [disabled]="isLoading || isExporting"
+        [attr.aria-label]="isExporting ? 'Exporting...' : 'Export options'"
+        matTooltip="{{ isExporting ? 'Exporting...' : 'Export options' }}">
+        <span class="flex items-center justify-center gap-2">
+          <mat-icon svgIcon="download" class="m-0"></mat-icon>
+        </span>
+      </button>
+    </div>
+  </mat-drawer-content>
+
+  <mat-menu #columnPreferenceMenu="matMenu" class="min-w-72">
+    <div class="px-4 py-3">
+      <div class="text-sm font-semibold">Column Preferences</div>
+      <div class="text-secondary text-xs">Choose which columns appear in the table.</div>
+    </div>
+    <div class="max-h-80 overflow-y-auto px-2 pb-2">
+      @for (column of allColumnPreferences; track column.key) {
+        <div
+          class="flex items-center justify-between gap-3 rounded-lg px-3 py-2 hover:bg-neutral-100 dark:hover:bg-white/5"
+          [class.opacity-60]="column.alwaysVisible"
+        >
+          <span class="text-sm font-medium">{{ column.label }}</span>
+          <mat-slide-toggle
+            [checked]="isColumnVisible(column.key)"
+            [disabled]="column.alwaysVisible"
+            (click)="$event.stopPropagation()"
+            (change)="toggleColumn(column.key)"
+          >
+          </mat-slide-toggle>
+        </div>
+      }
+    </div>
+    <div class="flex justify-end border-t px-2 py-2">
+      <button mat-button type="button" (click)="resetColumnPreferences()">Reset</button>
+    </div>
+  </mat-menu>
+
+  <mat-menu #exportMenu="matMenu">
+    <button mat-menu-item type="button" (click)="exportFilteredData()" [disabled]="isExporting">
+      <mat-icon svgIcon="search"></mat-icon>
+      <span>Export Filtered Data</span>
+    </button>
+    <button mat-menu-item type="button" (click)="exportAllData()" [disabled]="isExporting">
+      <mat-icon svgIcon="download"></mat-icon>
+      <span>Export All Data</span>
+    </button>
+  </mat-menu>
+
+  <mat-menu #flagMenu="matMenu">
+    @for (option of rowFlagOptions; track option.key) {
+      <button mat-menu-item type="button" (click)="setFlagColor(option.key)">
+        <mat-icon svgIcon="flag" class="mr-3" [ngClass]="option.iconClass"></mat-icon>
+        <span>{{ option.label }}</span>
+      </button>
+    }
+    <button mat-menu-item type="button" (click)="setFlagColor(null)">
+      <mat-icon svgIcon="x" class="mr-3 text-neutral-500"></mat-icon>
+      <span>Clear Flag</span>
+    </button>
+  </mat-menu>
+
+  @if (formMode !== 'page') {
+    <!-- Side Drawer for Form -->
+    <mat-drawer #formDrawer (closedStart)="clearFormState()" mode="over" position="end" class="cforge-form-drawer w-1/3 min-w-96 max-w-[90vw]">
+      <div class="flex h-full w-full min-w-0 flex-col bg-card p-6">
+        @if (formVisible) {
+        <app-<%= toKebabCase(entity.name) %>-form
+          class="block h-full w-full min-w-0 flex-1"
+          [entity]="selected<%= entity.name %>"
+          [heading]="drawerMode === 'new' ? 'New <%= entity.name %>' : 'Edit <%= entity.name %>'"
+          (saved)="handleFormSaved()"
+          (cancelled)="closeFormDrawer()">
+        </app-<%= toKebabCase(entity.name) %>-form>
+        }
+      </div>
+    </mat-drawer>
+  }
+</mat-drawer-container>

package/src/templates/angular/entity/components/presentation/list/_entity_-list.component.scss.ejs

@@ -0,0 +1,48 @@
+/* Entity-scoped list polish (tw-hipster parity). Global rules live in shared/styles/list-styles.css. */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.mat-mdc-header-row {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.mat-mdc-header-cell {
+  background: var(--mat-sys-surface-bright) !important;
+  z-index: 10 !important;
+  border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
+}
+
+th.shadow-left {
+  z-index: 15 !important;
+  box-shadow: -8px 0 12px -6px rgba(0, 0, 0, 0.15) !important;
+}
+
+td.shadow-left {
+  z-index: 5 !important;
+  box-shadow: -8px 0 12px -6px rgba(0, 0, 0, 0.15) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  th.shadow-left,
+  td.shadow-left {
+    box-shadow: -8px 0 12px -6px rgba(0, 0, 0, 0.45) !important;
+  }
+}
+
+tr:nth-child(even):not(.has-flag) {
+  background: var(--mat-sys-surface-container-low) !important;
+}
+
+tr:nth-child(odd):not(.has-flag) {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.sticky-actions-default {
+  background: inherit !important;
+}