@kanso-protocol/page-error 2.0.2 → 3.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.
|
@@ -97,7 +97,7 @@ class KpPageErrorComponent {
|
|
|
97
97
|
<ng-content select="[kpPageErrorSecondary]"/>
|
|
98
98
|
}
|
|
99
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-
|
|
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-text-disabled);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-surface-muted);color:var(--kp-color-text-muted)}.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-text-strong)}.kp-page-error__desc{margin:0;font-size:16px;line-height:1.5;color:var(--kp-color-text-muted)}.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
101
|
}
|
|
102
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpPageErrorComponent, decorators: [{
|
|
103
103
|
type: Component,
|
|
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
120
120
|
<ng-content select="[kpPageErrorSecondary]"/>
|
|
121
121
|
}
|
|
122
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-
|
|
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-text-disabled);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-surface-muted);color:var(--kp-color-text-muted)}.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-text-strong)}.kp-page-error__desc{margin:0;font-size:16px;line-height:1.5;color:var(--kp-color-text-muted)}.kp-page-error__actions{display:flex;align-items:center;gap:8px;margin-top:8px}\n"] }]
|
|
124
124
|
}], propDecorators: { type: [{
|
|
125
125
|
type: Input
|
|
126
126
|
}], title: [{
|
|
@@ -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 * <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-
|
|
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 /* text-disabled (gray-500 light / gray-600 dark) hits AA (4.84:1\n light, 6.5:1 dark) even though the number is aria-hidden — axe\n doesn't always honor aria-hidden for large decorative text. */\n color: var(--kp-color-text-disabled);\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": "3.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": ">=3.0.0"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — page-error (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|