{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "search-results-page", "title": "Search Results Page", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/search-results-page/search-results-page.component.ts", "content": "// Full search results page: pre-filled search input with result count, removable\n// filter chips with clear-all, a left facet sidebar, six result rows, and a\n// Previous/Next pagination footer. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n BookOpen,\n FileText,\n GitBranch,\n LucideAngularModule,\n MessageSquare,\n Search,\n Users,\n Video,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiChipComponent } from '@/ui/chip/chip.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\ninterface SearchResult {\n id: string\n icon: LucideIconData\n title: string\n path: string\n snippet: string\n type: string\n updated: string\n}\n\ninterface FacetOption {\n id: string\n label: string\n count: number\n}\n\ninterface FacetGroup {\n id: string\n label: string\n options: FacetOption[]\n}\n\ninterface FilterChip {\n id: string\n label: string\n}\n\nconst RESULTS: SearchResult[] = [\n {\n id: 'r1',\n icon: BookOpen,\n title: 'Onboarding flows: design your first-run experience',\n path: 'docs.acme.dev / guides / onboarding-flows',\n snippet:\n 'Learn how to compose onboarding flows from checklists, tours, and progressive disclosure so new users reach their first aha moment faster.',\n type: 'Docs',\n updated: '2 days ago',\n },\n {\n id: 'r2',\n icon: FileText,\n title: 'Checklist API reference for onboarding flows',\n path: 'docs.acme.dev / api / checklist',\n snippet:\n 'Full reference for the Checklist primitive used to drive onboarding flows, including step completion events, persistence, and theming.',\n type: 'Reference',\n updated: '5 hours ago',\n },\n {\n id: 'r3',\n icon: Video,\n title: 'Video walkthrough: building onboarding flows in 20 minutes',\n path: 'learn.acme.dev / videos / onboarding-flows-walkthrough',\n snippet:\n 'A hands-on screencast that builds a complete onboarding flow with branching steps, skippable tours, and analytics instrumentation.',\n type: 'Video',\n updated: '1 week ago',\n },\n {\n id: 'r4',\n icon: MessageSquare,\n title: 'How do you measure completion of onboarding flows?',\n path: 'community.acme.dev / discussions / 4821',\n snippet:\n 'Community thread comparing activation-rate funnels, step-drop-off charts, and qualitative surveys for measuring onboarding flow success.',\n type: 'Discussion',\n updated: '3 days ago',\n },\n {\n id: 'r5',\n icon: GitBranch,\n title: 'Example repo: onboarding flows with A/B-tested variants',\n path: 'github.com / acme / examples / onboarding-ab-test',\n snippet:\n 'Runnable example that splits new signups into two onboarding flow variants and reports which one converts better to first project creation.',\n type: 'Example',\n updated: '2 weeks ago',\n },\n {\n id: 'r6',\n icon: Users,\n title: 'Playbook: personalizing onboarding flows by team role',\n path: 'docs.acme.dev / playbooks / role-based-onboarding',\n snippet:\n 'Patterns for tailoring onboarding flows to admins, editors, and viewers, with sample copy, suggested defaults, and rollout checklists.',\n type: 'Guide',\n updated: '4 days ago',\n },\n]\n\nconst FACET_GROUPS: FacetGroup[] = [\n {\n id: 'type',\n label: 'Type',\n options: [\n { id: 'type-docs', label: 'Docs', count: 18 },\n { id: 'type-guides', label: 'Guides', count: 11 },\n { id: 'type-video', label: 'Video', count: 7 },\n { id: 'type-discussion', label: 'Discussion', count: 6 },\n ],\n },\n {\n id: 'team',\n label: 'Team',\n options: [\n { id: 'team-product', label: 'Product', count: 14 },\n { id: 'team-engineering', label: 'Engineering', count: 16 },\n { id: 'team-design', label: 'Design', count: 8 },\n { id: 'team-support', label: 'Support', count: 4 },\n ],\n },\n]\n\nconst TOTAL_PAGES = 3\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-search-results-page, [ui-search-results-page]',\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 UiCheckboxComponent,\n UiChipComponent,\n UiInputComponent,\n ],\n template: `\n
\n
\n
\n \n \n
\n

{{ resultRange() }} of 42 results for “{{ query() }}”

\n
\n\n @if (chips().length > 0) {\n
\n @for (chip of chips(); track chip.id) {\n \n {{ chip.label }}\n \n }\n \n Clear all\n \n
\n }\n\n
\n \n\n
\n
    \n @for (result of resultsList; track result.id) {\n
  1. \n \n
    \n \n \n
    \n
    \n

    {{ result.title }}

    \n

    {{ result.path }}

    \n

    {{ result.snippet }}

    \n
    \n {{ result.type }}\n Updated {{ result.updated }}\n
    \n
    \n
\n \n \n }\n \n\n \n
\n
\n
\n `,\n})\nexport class UiSearchResultsPageComponent {\n protected readonly Search = Search\n\n protected readonly facetGroups = FACET_GROUPS\n protected readonly resultsList = RESULTS\n protected readonly pageNumbers = Array.from({ length: TOTAL_PAGES }, (_, i) => i + 1)\n protected readonly totalPages = TOTAL_PAGES\n\n @Input() set initialQuery(v: string | undefined) {\n if (v !== undefined) this.query.set(v)\n }\n @Input('class') className?: string\n\n readonly query = signal('onboarding flows')\n readonly chips = signal([\n { id: 'type-docs', label: 'Type: Docs' },\n { id: 'team-product', label: 'Team: Product' },\n ])\n readonly activeFacets = signal>(new Set(['type-docs', 'team-product']))\n readonly page = signal(1)\n\n readonly resultRange = computed(() => {\n const start = (this.page() - 1) * this.resultsList.length + 1\n return `${start}-${start + this.resultsList.length - 1}`\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n removeChip(id: string): void {\n this.chips.update((prev) => prev.filter((chip) => chip.id !== id))\n }\n\n clearAll(): void {\n this.chips.set([])\n }\n\n toggleFacet(id: string, checked: boolean): void {\n this.activeFacets.update((prev) => {\n const next = new Set(prev)\n if (checked) next.add(id)\n else next.delete(id)\n return next\n })\n }\n\n prevPage(): void {\n this.page.update((p) => Math.max(1, p - 1))\n }\n\n nextPage(): void {\n this.page.update((p) => Math.min(TOTAL_PAGES, p + 1))\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/search-results-page/search-results-page.component.ts" }, { "path": "packages/registry-angular/blocks/search-results-page/index.ts", "content": "export { UiSearchResultsPageComponent } from './search-results-page.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/search-results-page/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/checkbox.json", "https://uipkge.dev/r/angular/chip.json", "https://uipkge.dev/r/angular/input.json" ], "description": "Full search results page: large pre-filled search input with result count, removable filter chips with clear-all, a left facet sidebar with Type and Team checkbox groups (hidden below lg), six result rows with icon tiles, titles, paths, snippets, and type/updated meta, plus a Previous/Next pagination footer. Chips and facets are interactive; swap the stub rows for your search source.", "categories": [ "layout", "app" ] }