@kanso-protocol/page-error 0.1.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.
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { KpIconComponent } from '@kanso-protocol/icon';
|
|
4
|
+
|
|
5
|
+
const DEFAULTS = {
|
|
6
|
+
'404': {
|
|
7
|
+
title: 'Page not found',
|
|
8
|
+
description: "The page you're looking for doesn't exist or has been moved. Check the URL or go back to the home page.",
|
|
9
|
+
icon: 'search-off',
|
|
10
|
+
code: '404',
|
|
11
|
+
},
|
|
12
|
+
'500': {
|
|
13
|
+
title: 'Something went wrong',
|
|
14
|
+
description: "Our servers are experiencing issues. We've been notified and are working on it. Please try again in a few minutes.",
|
|
15
|
+
icon: 'alert-triangle',
|
|
16
|
+
code: '500',
|
|
17
|
+
},
|
|
18
|
+
'offline': {
|
|
19
|
+
title: "You're offline",
|
|
20
|
+
description: 'Check your internet connection and try again. Some features may be unavailable while offline.',
|
|
21
|
+
icon: 'wifi-off',
|
|
22
|
+
code: null,
|
|
23
|
+
},
|
|
24
|
+
'access-denied': {
|
|
25
|
+
title: 'Access denied',
|
|
26
|
+
description: "You don't have permission to access this page. Contact your administrator to request access.",
|
|
27
|
+
icon: 'lock',
|
|
28
|
+
code: null,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Kanso Protocol — PageError
|
|
33
|
+
*
|
|
34
|
+
* Full-page error state for 404, 500, offline, and access-denied
|
|
35
|
+
* scenarios. Composes an illustration, optional hero error code,
|
|
36
|
+
* title + description, and primary/secondary action slots.
|
|
37
|
+
*
|
|
38
|
+
* Titles/descriptions/icon default to the `type` preset; override
|
|
39
|
+
* any of them via individual inputs.
|
|
40
|
+
*
|
|
41
|
+
* Slots:
|
|
42
|
+
* - `[kpPageErrorPrimary]` — primary CTA (Button, default)
|
|
43
|
+
* - `[kpPageErrorSecondary]` — secondary CTA (Button, ghost)
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* <kp-page-error type="404">
|
|
47
|
+
* <kp-button kpPageErrorPrimary>Go home</kp-button>
|
|
48
|
+
* <kp-button kpPageErrorSecondary variant="ghost">Report broken link</kp-button>
|
|
49
|
+
* </kp-page-error>
|
|
50
|
+
*/
|
|
51
|
+
class KpPageErrorComponent {
|
|
52
|
+
type = '404';
|
|
53
|
+
/** Override the preset title */
|
|
54
|
+
title = null;
|
|
55
|
+
/** Override the preset description */
|
|
56
|
+
description = null;
|
|
57
|
+
/** Override the Tabler icon name (without `ti-` prefix) */
|
|
58
|
+
icon = null;
|
|
59
|
+
/** Override the hero error code (pass empty string to hide on 404/500) */
|
|
60
|
+
errorCode = undefined;
|
|
61
|
+
showPrimary = true;
|
|
62
|
+
showSecondary = true;
|
|
63
|
+
get resolvedTitle() {
|
|
64
|
+
return this.title ?? DEFAULTS[this.type].title;
|
|
65
|
+
}
|
|
66
|
+
get resolvedDescription() {
|
|
67
|
+
return this.description ?? DEFAULTS[this.type].description;
|
|
68
|
+
}
|
|
69
|
+
get iconName() {
|
|
70
|
+
return this.icon ?? DEFAULTS[this.type].icon;
|
|
71
|
+
}
|
|
72
|
+
get code() {
|
|
73
|
+
if (this.errorCode === undefined)
|
|
74
|
+
return DEFAULTS[this.type].code;
|
|
75
|
+
return this.errorCode || null;
|
|
76
|
+
}
|
|
77
|
+
get hostClasses() {
|
|
78
|
+
return `kp-page-error kp-page-error--${this.type}`;
|
|
79
|
+
}
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpPageErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpPageErrorComponent, isStandalone: true, selector: "kp-page-error", inputs: { type: "type", title: "title", description: "description", icon: "icon", errorCode: "errorCode", showPrimary: "showPrimary", showSecondary: "showSecondary" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClasses" } }, ngImport: i0, template: `
|
|
82
|
+
@if (code) {
|
|
83
|
+
<div class="kp-page-error__code" aria-hidden="true">{{ code }}</div>
|
|
84
|
+
}
|
|
85
|
+
<div class="kp-page-error__illustration" aria-hidden="true">
|
|
86
|
+
<kp-icon [name]="iconName" size="xl" />
|
|
87
|
+
</div>
|
|
88
|
+
<div class="kp-page-error__text">
|
|
89
|
+
<h1 class="kp-page-error__title">{{ resolvedTitle }}</h1>
|
|
90
|
+
<p class="kp-page-error__desc">{{ resolvedDescription }}</p>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="kp-page-error__actions">
|
|
93
|
+
@if (showPrimary) {
|
|
94
|
+
<ng-content select="[kpPageErrorPrimary]"/>
|
|
95
|
+
}
|
|
96
|
+
@if (showSecondary) {
|
|
97
|
+
<ng-content select="[kpPageErrorSecondary]"/>
|
|
98
|
+
}
|
|
99
|
+
</div>
|
|
100
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:64px;min-height:600px;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);text-align:center}.kp-page-error__code{font-size:120px;font-weight:700;line-height:1;color:var(--kp-color-gray-200, var(--kp-color-gray-200));letter-spacing:-.02em;margin-bottom:0}.kp-page-error__illustration{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-page-error__illustration .ti{font-size:48px;line-height:1}.kp-page-error__text{display:flex;flex-direction:column;gap:8px;max-width:480px}.kp-page-error__title{margin:0;font-size:24px;font-weight:500;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-page-error__desc{margin:0;font-size:16px;line-height:1.5;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-page-error__actions{display:flex;align-items:center;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
101
|
+
}
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpPageErrorComponent, decorators: [{
|
|
103
|
+
type: Component,
|
|
104
|
+
args: [{ selector: 'kp-page-error', imports: [KpIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses', role: 'alert' }, template: `
|
|
105
|
+
@if (code) {
|
|
106
|
+
<div class="kp-page-error__code" aria-hidden="true">{{ code }}</div>
|
|
107
|
+
}
|
|
108
|
+
<div class="kp-page-error__illustration" aria-hidden="true">
|
|
109
|
+
<kp-icon [name]="iconName" size="xl" />
|
|
110
|
+
</div>
|
|
111
|
+
<div class="kp-page-error__text">
|
|
112
|
+
<h1 class="kp-page-error__title">{{ resolvedTitle }}</h1>
|
|
113
|
+
<p class="kp-page-error__desc">{{ resolvedDescription }}</p>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="kp-page-error__actions">
|
|
116
|
+
@if (showPrimary) {
|
|
117
|
+
<ng-content select="[kpPageErrorPrimary]"/>
|
|
118
|
+
}
|
|
119
|
+
@if (showSecondary) {
|
|
120
|
+
<ng-content select="[kpPageErrorSecondary]"/>
|
|
121
|
+
}
|
|
122
|
+
</div>
|
|
123
|
+
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:64px;min-height:600px;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);text-align:center}.kp-page-error__code{font-size:120px;font-weight:700;line-height:1;color:var(--kp-color-gray-200, var(--kp-color-gray-200));letter-spacing:-.02em;margin-bottom:0}.kp-page-error__illustration{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-500, var(--kp-color-gray-500))}.kp-page-error__illustration .ti{font-size:48px;line-height:1}.kp-page-error__text{display:flex;flex-direction:column;gap:8px;max-width:480px}.kp-page-error__title{margin:0;font-size:24px;font-weight:500;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-page-error__desc{margin:0;font-size:16px;line-height:1.5;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-page-error__actions{display:flex;align-items:center;gap:8px;margin-top:8px}\n"] }]
|
|
124
|
+
}], propDecorators: { type: [{
|
|
125
|
+
type: Input
|
|
126
|
+
}], title: [{
|
|
127
|
+
type: Input
|
|
128
|
+
}], description: [{
|
|
129
|
+
type: Input
|
|
130
|
+
}], icon: [{
|
|
131
|
+
type: Input
|
|
132
|
+
}], errorCode: [{
|
|
133
|
+
type: Input
|
|
134
|
+
}], showPrimary: [{
|
|
135
|
+
type: Input
|
|
136
|
+
}], showSecondary: [{
|
|
137
|
+
type: Input
|
|
138
|
+
}] } });
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Generated bundle index. Do not edit.
|
|
142
|
+
*/
|
|
143
|
+
|
|
144
|
+
export { KpPageErrorComponent };
|
|
145
|
+
//# sourceMappingURL=kanso-protocol-page-error.mjs.map
|
|
@@ -0,0 +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 * <kp-button kpPageErrorPrimary>Go home</kp-button>\n * <kp-button kpPageErrorSecondary variant=\"ghost\">Report broken link</kp-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-gray-200, var(--kp-color-gray-200));\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-gray-100, var(--kp-color-gray-100));\n color: var(--kp-color-gray-500, var(--kp-color-gray-500));\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-gray-900, var(--kp-color-gray-900));\n }\n .kp-page-error__desc {\n margin: 0;\n font-size: 16px;\n line-height: 1.5;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\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
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanso-protocol/page-error",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"peerDependencies": {
|
|
6
|
+
"@angular/core": "^18.0.0",
|
|
7
|
+
"@angular/common": "^18.0.0",
|
|
8
|
+
"@kanso-protocol/core": "^0.0.1"
|
|
9
|
+
},
|
|
10
|
+
"description": "Kanso Protocol — page-error (pattern).",
|
|
11
|
+
"author": "GregNBlack",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/GregNBlack/kanso-protocol.git",
|
|
15
|
+
"directory": "packages/patterns/page-error"
|
|
16
|
+
},
|
|
17
|
+
"homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-pageerror--docs",
|
|
18
|
+
"bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
|
|
19
|
+
"keywords": [
|
|
20
|
+
"design-system",
|
|
21
|
+
"angular",
|
|
22
|
+
"kanso",
|
|
23
|
+
"page-error"
|
|
24
|
+
],
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"module": "fesm2022/kanso-protocol-page-error.mjs",
|
|
27
|
+
"typings": "types/kanso-protocol-page-error.d.ts",
|
|
28
|
+
"exports": {
|
|
29
|
+
"./package.json": {
|
|
30
|
+
"default": "./package.json"
|
|
31
|
+
},
|
|
32
|
+
".": {
|
|
33
|
+
"types": "./types/kanso-protocol-page-error.d.ts",
|
|
34
|
+
"default": "./fesm2022/kanso-protocol-page-error.mjs"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"type": "module",
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"tslib": "^2.3.0"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
type KpPageErrorType = '404' | '500' | 'offline' | 'access-denied';
|
|
4
|
+
/**
|
|
5
|
+
* Kanso Protocol — PageError
|
|
6
|
+
*
|
|
7
|
+
* Full-page error state for 404, 500, offline, and access-denied
|
|
8
|
+
* scenarios. Composes an illustration, optional hero error code,
|
|
9
|
+
* title + description, and primary/secondary action slots.
|
|
10
|
+
*
|
|
11
|
+
* Titles/descriptions/icon default to the `type` preset; override
|
|
12
|
+
* any of them via individual inputs.
|
|
13
|
+
*
|
|
14
|
+
* Slots:
|
|
15
|
+
* - `[kpPageErrorPrimary]` — primary CTA (Button, default)
|
|
16
|
+
* - `[kpPageErrorSecondary]` — secondary CTA (Button, ghost)
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* <kp-page-error type="404">
|
|
20
|
+
* <kp-button kpPageErrorPrimary>Go home</kp-button>
|
|
21
|
+
* <kp-button kpPageErrorSecondary variant="ghost">Report broken link</kp-button>
|
|
22
|
+
* </kp-page-error>
|
|
23
|
+
*/
|
|
24
|
+
declare class KpPageErrorComponent {
|
|
25
|
+
type: KpPageErrorType;
|
|
26
|
+
/** Override the preset title */
|
|
27
|
+
title: string | null;
|
|
28
|
+
/** Override the preset description */
|
|
29
|
+
description: string | null;
|
|
30
|
+
/** Override the Tabler icon name (without `ti-` prefix) */
|
|
31
|
+
icon: string | null;
|
|
32
|
+
/** Override the hero error code (pass empty string to hide on 404/500) */
|
|
33
|
+
errorCode: string | null | undefined;
|
|
34
|
+
showPrimary: boolean;
|
|
35
|
+
showSecondary: boolean;
|
|
36
|
+
get resolvedTitle(): string;
|
|
37
|
+
get resolvedDescription(): string;
|
|
38
|
+
get iconName(): string;
|
|
39
|
+
get code(): string | null;
|
|
40
|
+
get hostClasses(): string;
|
|
41
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KpPageErrorComponent, never>;
|
|
42
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KpPageErrorComponent, "kp-page-error", never, { "type": { "alias": "type"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "errorCode": { "alias": "errorCode"; "required": false; }; "showPrimary": { "alias": "showPrimary"; "required": false; }; "showSecondary": { "alias": "showSecondary"; "required": false; }; }, {}, never, ["[kpPageErrorPrimary]", "[kpPageErrorSecondary]"], true, never>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export { KpPageErrorComponent };
|
|
46
|
+
export type { KpPageErrorType };
|