@kanso-protocol/page-error 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -44,8 +44,8 @@ const DEFAULTS = {
|
|
|
44
44
|
*
|
|
45
45
|
* @example
|
|
46
46
|
* <kp-page-error type="404">
|
|
47
|
-
* <
|
|
48
|
-
* <
|
|
47
|
+
* <button kpButton kpPageErrorPrimary>Go home</button>
|
|
48
|
+
* <button kpButton kpPageErrorSecondary variant="ghost">Report broken link</button>
|
|
49
49
|
* </kp-page-error>
|
|
50
50
|
*/
|
|
51
51
|
class KpPageErrorComponent {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-page-error.mjs","sources":["../../../../../packages/patterns/page-error/src/page-error.component.ts","../../../../../packages/patterns/page-error/src/kanso-protocol-page-error.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpPageErrorType = '404' | '500' | 'offline' | 'access-denied';\n\nconst DEFAULTS: Record<KpPageErrorType, { title: string; description: string; icon: string; code: string | null }> = {\n '404': {\n title: 'Page not found',\n description: \"The page you're looking for doesn't exist or has been moved. Check the URL or go back to the home page.\",\n icon: 'search-off',\n code: '404',\n },\n '500': {\n title: 'Something went wrong',\n description: \"Our servers are experiencing issues. We've been notified and are working on it. Please try again in a few minutes.\",\n icon: 'alert-triangle',\n code: '500',\n },\n 'offline': {\n title: \"You're offline\",\n description: 'Check your internet connection and try again. Some features may be unavailable while offline.',\n icon: 'wifi-off',\n code: null,\n },\n 'access-denied': {\n title: 'Access denied',\n description: \"You don't have permission to access this page. Contact your administrator to request access.\",\n icon: 'lock',\n code: null,\n },\n};\n\n/**\n * Kanso Protocol — PageError\n *\n * Full-page error state for 404, 500, offline, and access-denied\n * scenarios. Composes an illustration, optional hero error code,\n * title + description, and primary/secondary action slots.\n *\n * Titles/descriptions/icon default to the `type` preset; override\n * any of them via individual inputs.\n *\n * Slots:\n * - `[kpPageErrorPrimary]` — primary CTA (Button, default)\n * - `[kpPageErrorSecondary]` — secondary CTA (Button, ghost)\n *\n * @example\n * <kp-page-error type=\"404\">\n * <
|
|
1
|
+
{"version":3,"file":"kanso-protocol-page-error.mjs","sources":["../../../../../packages/patterns/page-error/src/page-error.component.ts","../../../../../packages/patterns/page-error/src/kanso-protocol-page-error.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpPageErrorType = '404' | '500' | 'offline' | 'access-denied';\n\nconst DEFAULTS: Record<KpPageErrorType, { title: string; description: string; icon: string; code: string | null }> = {\n '404': {\n title: 'Page not found',\n description: \"The page you're looking for doesn't exist or has been moved. Check the URL or go back to the home page.\",\n icon: 'search-off',\n code: '404',\n },\n '500': {\n title: 'Something went wrong',\n description: \"Our servers are experiencing issues. We've been notified and are working on it. Please try again in a few minutes.\",\n icon: 'alert-triangle',\n code: '500',\n },\n 'offline': {\n title: \"You're offline\",\n description: 'Check your internet connection and try again. Some features may be unavailable while offline.',\n icon: 'wifi-off',\n code: null,\n },\n 'access-denied': {\n title: 'Access denied',\n description: \"You don't have permission to access this page. Contact your administrator to request access.\",\n icon: 'lock',\n code: null,\n },\n};\n\n/**\n * Kanso Protocol — PageError\n *\n * Full-page error state for 404, 500, offline, and access-denied\n * scenarios. Composes an illustration, optional hero error code,\n * title + description, and primary/secondary action slots.\n *\n * Titles/descriptions/icon default to the `type` preset; override\n * any of them via individual inputs.\n *\n * Slots:\n * - `[kpPageErrorPrimary]` — primary CTA (Button, default)\n * - `[kpPageErrorSecondary]` — secondary CTA (Button, ghost)\n *\n * @example\n * <kp-page-error type=\"404\">\n * <button kpButton kpPageErrorPrimary>Go home</button>\n * <button kpButton kpPageErrorSecondary variant=\"ghost\">Report broken link</button>\n * </kp-page-error>\n */\n@Component({\n selector: 'kp-page-error',\n imports: [KpIconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses', role: 'alert' },\n template: `\n @if (code) {\n <div class=\"kp-page-error__code\" aria-hidden=\"true\">{{ code }}</div>\n }\n <div class=\"kp-page-error__illustration\" aria-hidden=\"true\">\n <kp-icon [name]=\"iconName\" size=\"xl\" />\n </div>\n <div class=\"kp-page-error__text\">\n <h1 class=\"kp-page-error__title\">{{ resolvedTitle }}</h1>\n <p class=\"kp-page-error__desc\">{{ resolvedDescription }}</p>\n </div>\n <div class=\"kp-page-error__actions\">\n @if (showPrimary) {\n <ng-content select=\"[kpPageErrorPrimary]\"/>\n }\n @if (showSecondary) {\n <ng-content select=\"[kpPageErrorSecondary]\"/>\n }\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n padding: 64px;\n min-height: 600px;\n width: 100%;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n text-align: center;\n }\n\n .kp-page-error__code {\n font-size: 120px;\n font-weight: 700;\n line-height: 1;\n color: var(--kp-color-border-default);\n letter-spacing: -0.02em;\n margin-bottom: 0;\n }\n\n .kp-page-error__illustration {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 96px;\n height: 96px;\n border-radius: 50%;\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-muted);\n }\n .kp-page-error__illustration .ti { font-size: 48px; line-height: 1; }\n\n .kp-page-error__text {\n display: flex;\n flex-direction: column;\n gap: 8px;\n max-width: 480px;\n }\n .kp-page-error__title {\n margin: 0;\n font-size: 24px;\n font-weight: 500;\n color: var(--kp-color-text-strong);\n }\n .kp-page-error__desc {\n margin: 0;\n font-size: 16px;\n line-height: 1.5;\n color: var(--kp-color-text-muted);\n }\n\n .kp-page-error__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n }\n `],\n})\nexport class KpPageErrorComponent {\n @Input() type: KpPageErrorType = '404';\n\n /** Override the preset title */\n @Input() title: string | null = null;\n /** Override the preset description */\n @Input() description: string | null = null;\n /** Override the Tabler icon name (without `ti-` prefix) */\n @Input() icon: string | null = null;\n /** Override the hero error code (pass empty string to hide on 404/500) */\n @Input() errorCode: string | null | undefined = undefined;\n\n @Input() showPrimary = true;\n @Input() showSecondary = true;\n\n get resolvedTitle(): string {\n return this.title ?? DEFAULTS[this.type].title;\n }\n get resolvedDescription(): string {\n return this.description ?? DEFAULTS[this.type].description;\n }\n get iconName(): string {\n return this.icon ?? DEFAULTS[this.type].icon;\n }\n\n get code(): string | null {\n if (this.errorCode === undefined) return DEFAULTS[this.type].code;\n return this.errorCode || null;\n }\n\n get hostClasses(): string {\n return `kp-page-error kp-page-error--${this.type}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/page-error",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": ">=21.0.0",
|
|
7
7
|
"@angular/common": ">=21.0.0",
|
|
8
|
-
"@kanso-protocol/core": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=2.0.0"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — page-error (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|
|
@@ -17,8 +17,8 @@ type KpPageErrorType = '404' | '500' | 'offline' | 'access-denied';
|
|
|
17
17
|
*
|
|
18
18
|
* @example
|
|
19
19
|
* <kp-page-error type="404">
|
|
20
|
-
* <
|
|
21
|
-
* <
|
|
20
|
+
* <button kpButton kpPageErrorPrimary>Go home</button>
|
|
21
|
+
* <button kpButton kpPageErrorSecondary variant="ghost">Report broken link</button>
|
|
22
22
|
* </kp-page-error>
|
|
23
23
|
*/
|
|
24
24
|
declare class KpPageErrorComponent {
|