{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "error-page", "title": "Error Page", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/error-page/error-404.component.ts", "content": "// Full-page 404 shipped inside the error-page set. Same copy and HTTP panel as the\n// standalone error-404 block, with an error-page-scoped selector. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport { ArrowLeft, LifeBuoy, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-error-page-404, [ui-error-page-404]',\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: [LucideAngularModule, UiButtonComponent],\n template: `\n
\n
\n
\n @if (codeText) {\n

HTTP {{ codeText }}

\n }\n @if (codeText) {\n

{{ codeText }}

\n }\n

{{ titleText }}

\n @if (descriptionText) {\n

{{ descriptionText }}

\n }\n @if (showPrimary || showSecondary) {\n
\n @if (showPrimary) {\n @if (primaryHref) {\n \n \n {{ primaryText }}\n \n } @else {\n \n }\n }\n @if (showSecondary) {\n @if (secondaryHref) {\n \n {{ secondaryText }}\n \n \n } @else {\n \n {{ secondaryText }}\n \n \n }\n }\n
\n }\n
\n @if (image) {\n
\n \n
\n } @else if (image === undefined) {\n
\n
\n curl -i https://app.acme.dev/pricing/teams\n
\n
\n

HTTP/1.1 {{ codeText || '404' }} Not Found

\n

content-type: application/json

\n

x-request-id: req_9k2e18

\n

{{ '{ \"error\": \"not_found\", \"path\": \"/pricing/teams\" }' }}

\n
\n
\n }\n
\n
\n `,\n})\nexport class UiErrorPage404Component {\n protected readonly ArrowLeft = ArrowLeft\n protected readonly LifeBuoy = LifeBuoy\n\n @Input() code?: string\n @Input() title?: string\n @Input() description?: string\n /** Replaces the HTTP response panel. Pass `''` to hide art entirely. */\n @Input() image: string | undefined = '/illustrations/error-404.jpg'\n @Input() imageAlt = ''\n @Input() primaryLabel?: string\n @Input() secondaryLabel?: string\n @Input() primaryHref?: string\n @Input() secondaryHref?: string\n @Input() showPrimary = true\n @Input() showSecondary = true\n @Input() primaryDisabled = false\n @Input() secondaryDisabled = false\n @Output() primary = new EventEmitter()\n @Output() secondary = new EventEmitter()\n /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n @Input() layout: 'page' | 'contained' = 'page'\n @Input('class') className?: string\n\n get codeText(): string {\n return this.code === undefined ? '404' : this.code\n }\n\n get titleText(): string {\n return this.title === undefined ? 'Page not found' : this.title\n }\n\n get descriptionText(): string {\n return this.description === undefined\n ? \"The page you're looking for doesn't exist or may have been moved. Check the URL or head back home.\"\n : this.description\n }\n\n get primaryText(): string {\n return this.primaryLabel === undefined ? 'Back to home' : this.primaryLabel\n }\n\n get secondaryText(): string {\n return this.secondaryLabel === undefined ? 'Contact support' : this.secondaryLabel\n }\n\n get rootClass(): string {\n return cn(\n 'bg-background relative flex items-center overflow-hidden px-6 py-16',\n this.layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n this.className,\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/error-page/error-404.component.ts" }, { "path": "packages/registry-angular/blocks/error-page/error-500.component.ts", "content": "// Full-page 500 shipped inside the error-page set. Same copy and HTTP panel as the\n// standalone error-500 block, with an error-page-scoped selector. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport { LifeBuoy, LucideAngularModule, RefreshCcw } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-error-page-500, [ui-error-page-500]',\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: [LucideAngularModule, UiButtonComponent],\n template: `\n
\n
\n
\n @if (codeText) {\n

HTTP {{ codeText }}

\n }\n @if (codeText) {\n

{{ codeText }}

\n }\n

{{ titleText }}

\n @if (descriptionText) {\n

{{ descriptionText }}

\n }\n @if (showPrimary || showSecondary || showTertiary) {\n
\n @if (showPrimary) {\n @if (primaryHref) {\n \n \n {{ primaryText }}\n \n } @else {\n \n }\n }\n @if (showSecondary) {\n @if (secondaryHref) {\n \n {{ secondaryText }}\n \n } @else {\n \n {{ secondaryText }}\n \n }\n }\n @if (showTertiary) {\n @if (tertiaryHref) {\n \n {{ tertiaryText }}\n \n \n } @else {\n \n }\n }\n
\n }\n
\n @if (image) {\n
\n \n
\n } @else if (image === undefined) {\n
\n
\n POST /api/v1/invoices\n
\n
\n

\n HTTP/1.1\n {{ ' ' }}\n {{ codeText || '500' }} Internal Server Error\n

\n

error: ECONNRESET

\n

at: Worker.run:142

\n

x-request-id: req_8f3c2a

\n
\n
\n }\n
\n
\n `,\n})\nexport class UiErrorPage500Component {\n protected readonly LifeBuoy = LifeBuoy\n protected readonly RefreshCcw = RefreshCcw\n\n @Input() code?: string\n @Input() title?: string\n @Input() description?: string\n /** Replaces the HTTP response panel. Pass `''` to hide art entirely. */\n @Input() image: string | undefined = '/illustrations/error-500.jpg'\n @Input() imageAlt = ''\n @Input() primaryLabel?: string\n @Input() secondaryLabel?: string\n @Input() tertiaryLabel?: string\n @Input() primaryHref?: string\n @Input() secondaryHref?: string\n @Input() tertiaryHref?: string\n @Input() showPrimary = true\n @Input() showSecondary = true\n @Input() showTertiary = true\n @Input() primaryDisabled = false\n @Input() secondaryDisabled = false\n @Input() tertiaryDisabled = false\n @Output() primary = new EventEmitter()\n @Output() secondary = new EventEmitter()\n @Output() tertiary = new EventEmitter()\n /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n @Input() layout: 'page' | 'contained' = 'page'\n @Input('class') className?: string\n\n get codeText(): string {\n return this.code === undefined ? '500' : this.code\n }\n\n get titleText(): string {\n return this.title === undefined ? 'Something went wrong' : this.title\n }\n\n get descriptionText(): string {\n return this.description === undefined\n ? 'We hit an unexpected error on our side. Try again in a moment — if it keeps happening, our team is on it.'\n : this.description\n }\n\n get primaryText(): string {\n return this.primaryLabel === undefined ? 'Try again' : this.primaryLabel\n }\n\n get secondaryText(): string {\n return this.secondaryLabel === undefined ? 'Back to home' : this.secondaryLabel\n }\n\n get tertiaryText(): string {\n return this.tertiaryLabel === undefined ? 'Contact support' : this.tertiaryLabel\n }\n\n get rootClass(): string {\n return cn(\n 'bg-background relative flex items-center overflow-hidden px-6 py-16',\n this.layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n this.className,\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/error-page/error-500.component.ts" }, { "path": "packages/registry-angular/blocks/error-page/error-pages.component.ts", "content": "// Four-variant status-screen gallery: 404, 500, 403, and maintenance cards with matching\n// HTTP response panels, plus single-variant mode. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport { Clock, LucideAngularModule, RotateCcw } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport type ErrorPagesVariant = '404' | '500' | '403' | 'maintenance'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-error-pages, [ui-error-pages]',\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: [LucideAngularModule, UiButtonComponent],\n template: `\n
\n @if (show('404')) {\n
\n @if (image404) {\n \n } @else if (image404 === undefined) {\n
\n
\n GET /pricing/teams\n
\n
\n

HTTP/1.1 {{ code404 || '404' }} Not Found

\n

x-request-id: req_9k2e18

\n
\n
\n }\n
\n @if (code404) {\n

{{ code404 }}

\n }\n

{{ title404 }}

\n

{{ desc404 }}

\n @if (variant === '404' && tag) {\n

\n {{ tag }}\n

\n }\n @if (showPrimary || showSecondary) {\n
\n @if (showPrimary) {\n @if (primaryHref) {\n {{ primary404 }}\n } @else {\n \n }\n }\n @if (showSecondary) {\n @if (secondaryHref) {\n \n {{ secondary404 }}\n \n } @else {\n \n {{ secondary404 }}\n \n }\n }\n
\n }\n
\n
\n }\n\n @if (show('500')) {\n
\n @if (image500) {\n \n } @else if (image500 === undefined) {\n
\n
\n POST /api/v1/invoices\n
\n
\n

\n HTTP/1.1{{ ' ' }}\n {{ code500 || '500' }} Internal Server Error\n

\n

error: ECONNRESET at Worker.run:142

\n
\n
\n }\n
\n @if (code500) {\n

{{ code500 }}

\n }\n

{{ title500 }}

\n

{{ desc500 }}

\n @if (variant === '500' && tag) {\n

\n {{ tag }}\n

\n }\n @if (showPrimary || showSecondary) {\n
\n @if (showPrimary) {\n @if (primaryHref) {\n \n \n {{ primary500 }}\n \n } @else {\n \n }\n }\n @if (showSecondary) {\n @if (secondaryHref) {\n \n {{ secondary500 }}\n \n } @else {\n \n {{ secondary500 }}\n \n }\n }\n
\n }\n
\n
\n }\n\n @if (show('403')) {\n
\n @if (image403) {\n \n } @else if (image403 === undefined) {\n
\n
\n GET /admin/billing\n
\n
\n

\n HTTP/1.1{{ ' ' }}\n {{ code403 || '403' }} Forbidden\n

\n

scope billing:read — denied for guest

\n
\n
\n }\n
\n @if (code403) {\n

{{ code403 }}

\n }\n

{{ title403 }}

\n

{{ desc403 }}

\n @if (variant === '403' && tag) {\n

\n {{ tag }}\n

\n }\n @if (showPrimary || showSecondary) {\n
\n @if (showSecondary) {\n @if (secondaryHref) {\n \n {{ secondary403 }}\n \n } @else {\n \n {{ secondary403 }}\n \n }\n }\n @if (showPrimary) {\n @if (primaryHref) {\n \n {{ primary403 }}\n \n } @else {\n \n }\n }\n
\n }\n
\n
\n }\n\n @if (show('maintenance')) {\n
\n @if (image503) {\n \n } @else if (image503 === undefined) {\n
\n
GET /health
\n
\n

\n HTTP/1.1{{ ' ' }}\n {{ code503 || '503' }} Service Unavailable\n

\n

Retry-After: 3600

\n
\n
\n }\n
\n @if (code503) {\n

{{ code503 }}

\n }\n

{{ title503 }}

\n

{{ desc503 }}

\n @if (tag503) {\n \n \n {{ tag503 }}\n

\n }\n @if (showPrimary || (showSecondary && secondary503)) {\n
\n @if (showPrimary) {\n @if (primaryHref) {\n \n {{ primary503 }}\n \n } @else {\n \n {{ primary503 }}\n \n }\n }\n @if (showSecondary && secondary503) {\n @if (secondaryHref) {\n \n {{ secondary503 }}\n \n } @else {\n \n {{ secondary503 }}\n \n }\n }\n
\n }\n
\n
\n }\n
\n `,\n})\nexport class UiErrorPagesComponent {\n protected readonly Clock = Clock\n protected readonly RotateCcw = RotateCcw\n\n /** `'all'` renders the full gallery; a single variant renders just that screen. */\n @Input() variant: ErrorPagesVariant | 'all' = 'all'\n @Input() size: 'sm' | 'default' = 'default'\n @Input('class') className?: string\n @Input() title?: string\n @Input() description?: string\n /** Status numeral. Pass `''` to hide. */\n @Input() code?: string\n /** Eyebrow pill (maintenance ETA by default). Pass `''` to hide. */\n @Input() tag?: string\n /** Replaces the HTTP response panel on a single variant. Pass `''` to hide art. */\n @Input() image?: string\n @Input() imageAlt = ''\n @Input() primaryLabel?: string\n @Input() secondaryLabel?: string\n @Input() primaryHref?: string\n @Input() secondaryHref?: string\n @Input() showPrimary = true\n @Input() showSecondary = true\n @Input() primaryDisabled = false\n @Input() secondaryDisabled = false\n @Output() home = new EventEmitter()\n @Output() search = new EventEmitter()\n @Output() retry = new EventEmitter()\n @Output() status = new EventEmitter()\n @Output() switchAccount = new EventEmitter()\n @Output() requestAccess = new EventEmitter()\n @Output() subscribe = new EventEmitter()\n\n show(v: ErrorPagesVariant): boolean {\n return this.variant === 'all' || this.variant === v\n }\n\n private copy(fallback: string, override?: string): string {\n return override === undefined ? fallback : override\n }\n\n private forVariant(v: ErrorPagesVariant, fallback: string, override?: string): string {\n return this.variant === v ? this.copy(fallback, override) : fallback\n }\n\n get rootClass(): string {\n return cn(this.variant === 'all' && 'grid gap-4 sm:grid-cols-2', this.className)\n }\n\n get frameClass(): string {\n return cn('border-border bg-card overflow-hidden rounded-xl border text-left', this.size === 'sm' && 'rounded-lg')\n }\n\n get imgClass(): string {\n return 'aspect-[16/10] w-full object-cover'\n }\n\n get panelClass(): string {\n return 'border-border bg-muted/40 border-b font-mono'\n }\n\n get bodyClass(): string {\n return this.size === 'sm' ? 'p-5' : 'p-6'\n }\n\n get codeClass(): string {\n return cn('font-semibold tracking-tighter', this.size === 'sm' ? 'text-2xl' : 'text-4xl')\n }\n\n get titleClass(): string {\n return cn('mt-1.5 font-semibold tracking-tight', this.size === 'sm' ? 'text-base' : 'text-xl')\n }\n\n get descClass(): string {\n return 'text-muted-foreground mt-2 max-w-sm text-sm'\n }\n\n get actionsClass(): string {\n return cn('flex flex-wrap items-center gap-2', this.size === 'sm' ? 'mt-4' : 'mt-5')\n }\n\n get actionSize(): 'xs' | 'sm' {\n return this.size === 'sm' ? 'xs' : 'sm'\n }\n\n get title404(): string {\n return this.forVariant('404', 'Page not found', this.title)\n }\n get desc404(): string {\n return this.forVariant(\n '404',\n \"The page you're looking for doesn't exist or was moved. Check the URL or head back home.\",\n this.description,\n )\n }\n get code404(): string {\n return this.forVariant('404', '404', this.code)\n }\n get image404(): string | undefined {\n return this.forVariant('404', '/illustrations/error-404.jpg', this.image)\n }\n get primary404(): string {\n return this.forVariant('404', 'Go home', this.primaryLabel)\n }\n get secondary404(): string {\n return this.forVariant('404', 'Search docs', this.secondaryLabel)\n }\n\n get title500(): string {\n return this.forVariant('500', 'Internal server error', this.title)\n }\n get desc500(): string {\n return this.forVariant(\n '500',\n 'Something went wrong on our end. The team has been notified — try again in a moment.',\n this.description,\n )\n }\n get code500(): string {\n return this.forVariant('500', '500', this.code)\n }\n get image500(): string | undefined {\n return this.forVariant('500', '/illustrations/error-500.jpg', this.image)\n }\n get primary500(): string {\n return this.forVariant('500', 'Retry', this.primaryLabel)\n }\n get secondary500(): string {\n return this.forVariant('500', 'Status page', this.secondaryLabel)\n }\n\n get title403(): string {\n return this.forVariant('403', 'Access denied', this.title)\n }\n get desc403(): string {\n return this.forVariant(\n '403',\n \"You don't have permission to view this page. Switch accounts or ask an admin to request access.\",\n this.description,\n )\n }\n get code403(): string {\n return this.forVariant('403', '403', this.code)\n }\n get image403(): string | undefined {\n return this.forVariant('403', '/illustrations/error-403.jpg', this.image)\n }\n get primary403(): string {\n return this.forVariant('403', 'Request access', this.primaryLabel)\n }\n get secondary403(): string {\n return this.forVariant('403', 'Switch account', this.secondaryLabel)\n }\n\n get title503(): string {\n return this.forVariant('maintenance', 'Scheduled maintenance', this.title)\n }\n get desc503(): string {\n return this.forVariant(\n 'maintenance',\n \"We're upgrading our systems. The service will be back online shortly.\",\n this.description,\n )\n }\n get code503(): string {\n return this.forVariant('maintenance', '503', this.code)\n }\n get image503(): string | undefined {\n return this.forVariant('maintenance', '/illustrations/error-maintenance.jpg', this.image)\n }\n get tag503(): string {\n return this.forVariant('maintenance', 'Back online around 14:00 UTC', this.tag)\n }\n get primary503(): string {\n return this.forVariant('maintenance', 'Subscribe for updates', this.primaryLabel)\n }\n get secondary503(): string {\n return this.variant === 'maintenance' ? (this.secondaryLabel ?? '') : (this.secondaryLabel ?? '')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/error-page/error-pages.component.ts" }, { "path": "packages/registry-angular/blocks/error-page/index.ts", "content": "export { UiErrorPage404Component } from './error-404.component'\nexport { UiErrorPage500Component } from './error-500.component'\nexport { UiErrorPagesComponent, type ErrorPagesVariant } from './error-pages.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/error-page/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json" ], "description": "Status-screen set with prop-driven 404 and 500 pages plus a four-variant gallery (404, 500, 403, and maintenance) with single-screen, compact-size, and callback controls.", "categories": [ "layout", "feedback", "marketing", "utility" ] }