Fix Create Deployment wizard: add missing SlicePipe import
Root cause: the | slice pipe was used in the template but SlicePipe was not in the standalone component's imports array. This caused Angular's resolveDirective to throw 'Cannot read factory' on every change detection cycle, preventing mock version cards from rendering and breaking the Continue button validation. Also: removed unused RouterModule import, converted computed signals to methods for PlatformContextStore-dependent values, added platformCtx.initialize() in constructor. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
@@ -162,10 +162,114 @@ const MY_TABS: readonly StellaPageTab[] = [
|
||||
- Do NOT duplicate the tab bar styling — the component owns all tab CSS
|
||||
- The component provides: keyboard navigation, ARIA roles, active background, bottom border, icon opacity transitions, panel border-radius, enter animation
|
||||
|
||||
## Table Styling Convention
|
||||
All HTML tables must use the `stella-table` CSS class for consistent styling.
|
||||
Never define custom table padding, borders, or header styles inline.
|
||||
Use the shared data-table component when possible, or the stella-table class for simple static tables.
|
||||
## Data Table Convention (MANDATORY)
|
||||
|
||||
All data tables **must** use `<app-data-table>` for interactive tables or `.stella-table` CSS classes for simple static tables.
|
||||
Do NOT create custom table styling, sort headers, or selection checkboxes.
|
||||
|
||||
**Components:**
|
||||
- `shared/components/data-table/data-table.component.ts` — interactive table (sorting, selection, templates)
|
||||
- `shared/components/pagination/pagination.component.ts` — page navigation
|
||||
- `src/styles/_tables.scss` — global `.stella-table` CSS classes
|
||||
|
||||
**Usage (interactive table with sorting + pagination):**
|
||||
```html
|
||||
<app-data-table
|
||||
[columns]="columns"
|
||||
[data]="pagedItems()"
|
||||
[loading]="loading()"
|
||||
[striped]="true"
|
||||
[hoverable]="true"
|
||||
[selectable]="false"
|
||||
emptyTitle="No items found"
|
||||
emptyDescription="Adjust filters or create a new item."
|
||||
(sortChange)="onSortChange($event)"
|
||||
(rowClick)="onRowClick($event)"
|
||||
>
|
||||
<div tablePagination>
|
||||
<app-pagination
|
||||
[total]="totalItems()"
|
||||
[currentPage]="currentPage()"
|
||||
[pageSize]="pageSize()"
|
||||
[pageSizes]="[5, 10, 25, 50]"
|
||||
(pageChange)="onPageChange($event)"
|
||||
/>
|
||||
</div>
|
||||
</app-data-table>
|
||||
```
|
||||
|
||||
**Column definition with custom cell templates:**
|
||||
```typescript
|
||||
readonly columns: TableColumn<MyItem>[] = [
|
||||
{ key: 'name', label: 'Name', sortable: true },
|
||||
{ key: 'status', label: 'Status', sortable: true, template: statusTemplate },
|
||||
{ key: 'actions', label: 'Actions', sortable: false, align: 'right' },
|
||||
];
|
||||
```
|
||||
|
||||
**Usage (simple static table):**
|
||||
```html
|
||||
<table class="stella-table stella-table--striped stella-table--hoverable stella-table--bordered">
|
||||
<thead><tr><th>Name</th><th>Value</th></tr></thead>
|
||||
<tbody><tr><td>...</td><td>...</td></tr></tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
**Design rules:**
|
||||
- Pagination must be right-aligned below the table
|
||||
- Page size options must include 5: `[5, 10, 25, 50]`
|
||||
- All list/catalog pages must be sortable by at least the primary column
|
||||
- Use `stella-table--bordered` for tables that are the main page content
|
||||
- Use `stella-table--striped` for tables with more than 5 rows
|
||||
- Loading state must show skeleton rows, not a spinner
|
||||
|
||||
## Filter Convention (MANDATORY)
|
||||
|
||||
Three filter component types:
|
||||
1. `stella-filter-chip` — Single-select dropdown (Region, Env, Stage, Type, Gate, Risk)
|
||||
2. `stella-filter-multi` — Multi-select with checkboxes + All/None (Severity, Status)
|
||||
3. `stella-view-mode-switcher` — Binary toggle (Operator/Auditor, view modes)
|
||||
|
||||
**Components:**
|
||||
- `shared/components/stella-filter-chip/stella-filter-chip.component.ts` — single-select
|
||||
- `shared/components/stella-filter-multi/stella-filter-multi.component.ts` — multi-select
|
||||
- `shared/components/view-mode-switcher/view-mode-switcher.component.ts` — binary toggle
|
||||
- `shared/ui/filter-bar/filter-bar.component.ts` — combined search + dropdown filters + active chips
|
||||
|
||||
**Usage (filter chips for page-level filters):**
|
||||
```html
|
||||
<stella-filter-chip
|
||||
label="Status"
|
||||
[value]="statusFilter()"
|
||||
[options]="statusOptions"
|
||||
(valueChange)="statusFilter.set($event)"
|
||||
/>
|
||||
<stella-filter-multi
|
||||
label="Severity"
|
||||
[options]="severityOptions()"
|
||||
(optionsChange)="onSeverityChange($event)"
|
||||
/>
|
||||
```
|
||||
|
||||
**Usage (filter bar with search + dropdowns):**
|
||||
```html
|
||||
<app-filter-bar
|
||||
searchPlaceholder="Search..."
|
||||
[filters]="filterOptions"
|
||||
[activeFilters]="activeFilters()"
|
||||
(searchChange)="searchQuery.set($event)"
|
||||
(filterChange)="onFilterAdded($event)"
|
||||
(filterRemove)="onFilterRemoved($event)"
|
||||
(filtersCleared)="clearAllFilters()"
|
||||
/>
|
||||
```
|
||||
|
||||
**Design rules:**
|
||||
- Global filters (Region, Env, Window, Stage, Operator/Auditor) live in the header bar only
|
||||
- Pages must NOT duplicate global filters — read from PlatformContextStore
|
||||
- Page-level filters use `stella-filter-chip` or `stella-filter-multi` inline above the table
|
||||
- Use `app-filter-bar` when search + multiple dropdowns + active chips are needed
|
||||
- Compact inline chips: 28px height, no border default, dropdown on click
|
||||
|
||||
## Filter Convention (MANDATORY)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user