{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "case-study-filterable-list", "title": "Case Studies — Filterable List", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/case-study-filterable-list/case-study-filterable-list.component.ts", "content": "// Filterable index of customer stories: industry chips narrow rows carrying the headline\n// result, stack, and read time, with an empty state covering no matches. Port of the React\n// block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowUpRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\nexport interface CaseStudyListStudy {\n company: string\n industry: string\n result: string\n stack: string\n readTime: string\n}\n\nconst defaultStudies: CaseStudyListStudy[] = [\n {\n company: 'Northwind Logistics',\n industry: 'Logistics',\n result: '5 days off the monthly close',\n stack: 'Snowflake · dbt · Okta',\n readTime: '8 min',\n },\n {\n company: 'Halden Health',\n industry: 'Healthcare',\n result: '71% fewer ad-hoc data requests',\n stack: 'BigQuery · Airflow',\n readTime: '6 min',\n },\n {\n company: 'Verity Retail Group',\n industry: 'Retail',\n result: '2.4pp tighter forecast band',\n stack: 'Redshift · dbt',\n readTime: '7 min',\n },\n {\n company: 'Calder Manufacturing',\n industry: 'Manufacturing',\n result: '11 spreadsheets retired',\n stack: 'Postgres · Dagster',\n readTime: '5 min',\n },\n {\n company: 'Ridgeway Freight',\n industry: 'Logistics',\n result: 'Per-shipment landed cost',\n stack: 'Snowflake · Fivetran',\n readTime: '9 min',\n },\n {\n company: 'Ashford Clinics',\n industry: 'Healthcare',\n result: 'PHI-scoped self-serve reporting',\n stack: 'BigQuery · Entra ID',\n readTime: '6 min',\n },\n]\n\nconst ALL = 'All'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-filterable-list, [ui-case-study-filterable-list]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n UiToggleGroupComponent,\n UiToggleGroupItemComponent,\n ],\n template: `\n
\n
\n
\n
\n Customer stories\n

Read one close to your own

\n
\n\n \n @for (industry of industries(); track industry) {\n \n }\n
\n
\n\n
\n
\n @if (visible().length === 0) {\n
\n

No stories in that industry yet.

\n \n
\n } @else {\n
    \n @for (study of visible(); track study.company; let last = $last) {\n
  • \n \n
    \n
    \n

    {{ study.company }}

    \n {{ study.industry }}\n
    \n

    {{ study.result }}

    \n

    {{ study.stack }}

    \n
    \n {{ study.readTime }}\n \n \n
    • \n @if (!last) {\n \n }\n }\n
\n }\n
\n
\n \n
\n `,\n})\nexport class UiCaseStudyFilterableListComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly allLabel = ALL\n\n @Input() set initialStudies(v: CaseStudyListStudy[] | undefined) {\n this.studies.set((v ?? defaultStudies).map((s) => ({ ...s })))\n }\n @Input() set defaultIndustry(v: string | undefined) {\n this.active.set(v ?? ALL)\n }\n @Input('class') className?: string\n\n readonly studies = signal(defaultStudies.map((s) => ({ ...s })))\n readonly active = signal(ALL)\n\n readonly industries = computed(() => [ALL, ...new Set(this.studies().map((s) => s.industry))])\n readonly visible = computed(() => {\n const active = this.active()\n return active === ALL ? this.studies() : this.studies().filter((s) => s.industry === active)\n })\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n // Single-select emits '' when the pressed chip is pressed again; fall back to ALL so the\n // list is never empty by accident.\n onFilterChange(value: string | string[]): void {\n const next = Array.isArray(value) ? (value[0] ?? '') : value\n this.active.set(next || ALL)\n }\n\n showAll(): void {\n this.active.set(ALL)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/case-study-filterable-list/case-study-filterable-list.component.ts" }, { "path": "packages/registry-angular/blocks/case-study-filterable-list/index.ts", "content": "export { UiCaseStudyFilterableListComponent, type CaseStudyListStudy } from './case-study-filterable-list.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/case-study-filterable-list/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/toggle-group.json" ], "description": "Filterable index of customer stories with industry chips above rows carrying the headline result, stack, and read time, plus an empty state.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "case-study" }