@xui/result 2.0.0-alpha.19 → 2.0.0-alpha.21
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.
package/fesm2022/xui-result.mjs
CHANGED
|
@@ -22,12 +22,16 @@ const [injectXuiResultConfig, provideXuiResultConfig] = createXConfigToken('XuiR
|
|
|
22
22
|
*/
|
|
23
23
|
class XuiResult {
|
|
24
24
|
config = injectXuiResultConfig();
|
|
25
|
+
/** Extra classes, merged into the component's own rather than replacing them. */
|
|
25
26
|
class = input('', /* @ts-ignore */
|
|
26
27
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
28
|
+
/** What happened. Picks the glyph and its tint; the HTTP codes render as the number itself. */
|
|
27
29
|
status = input(this.config.status, /* @ts-ignore */
|
|
28
30
|
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
31
|
+
/** The headline — what the outcome was. */
|
|
29
32
|
title = input('', /* @ts-ignore */
|
|
30
33
|
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
34
|
+
/** Supporting detail under the title. Project buttons as content for what to do next. */
|
|
31
35
|
subtitle = input('', /* @ts-ignore */
|
|
32
36
|
...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
33
37
|
computedClass = computed(() => xui('flex flex-col items-center gap-3 p-8 text-center', this.class()), /* @ts-ignore */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-result.mjs","sources":["../../../../../../libs/ui/result/xui/src/lib/result.token.ts","../../../../../../libs/ui/result/xui/src/lib/result.ts","../../../../../../libs/ui/result/xui/src/index.ts","../../../../../../libs/ui/result/xui/src/xui-result.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport type { XuiResultStatus } from './result';\n\n/**\n * Application-wide defaults for XuiResult.\n *\n * Provide it once at the app root to change every result page without touching\n * call sites; individual inputs still override the configured value.\n */\nexport interface XuiResultConfig {\n status: XuiResultStatus;\n}\n\nexport const [injectXuiResultConfig, provideXuiResultConfig] = createXConfigToken<XuiResultConfig>('XuiResultConfig', {\n status: 'info'\n});\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound, matCloseRound, matInfoRound, matPriorityHighRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiResultConfig } from './result.token';\n\nexport type XuiResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n/**\n * A result / status page — a large status glyph over a title and subtitle, with\n * optional body content and an `[xuiResultExtra]` action slot. `status` picks the\n * icon and tint (success/error/info/warning) or shows an HTTP code (404/403/500).\n *\n * ```html\n * <xui-result status=\"success\" title=\"Payment received\" subtitle=\"Order #1024 is confirmed.\">\n * <button xuiButton xuiResultExtra>Go home</button>\n * </xui-result>\n * ```\n */\n@Component({\n selector: 'xui-result',\n template: `\n <div [class]=\"iconWrapClass()\">\n @switch (status()) {\n @case ('success') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matCheckRound\" />\n }\n @case ('error') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matCloseRound\" />\n }\n @case ('warning') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matPriorityHighRound\" />\n }\n @default {\n @if (status() === '404' || status() === '403' || status() === '500') {\n <span class=\"text-foreground-muted text-3xl font-bold tabular-nums\">{{ status() }}</span>\n } @else {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matInfoRound\" />\n }\n }\n }\n </div>\n\n @if (title()) {\n <h2 class=\"text-foreground text-xl font-semibold\">{{ title() }}</h2>\n }\n @if (subtitle()) {\n <p class=\"text-foreground-muted max-w-prose\">{{ subtitle() }}</p>\n }\n <div class=\"w-full empty:hidden\"><ng-content /></div>\n <div class=\"mt-4 flex flex-wrap justify-center gap-2 empty:hidden\">\n <ng-content select=\"[xuiResultExtra]\" />\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n imports: [NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matCheckRound, matCloseRound, matInfoRound, matPriorityHighRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiResult {\n private readonly config = injectXuiResultConfig();\n\n readonly class = input<ClassValue>('');\n\n readonly status = input<XuiResultStatus>(this.config.status);\n readonly title = input<string>('');\n readonly subtitle = input<string>('');\n\n protected readonly computedClass = computed(() =>\n xui('flex flex-col items-center gap-3 p-8 text-center', this.class())\n );\n\n protected readonly glyphClass = computed(() => xui(tintText(this.status())));\n protected readonly iconWrapClass = computed(() =>\n xui('mb-2 flex size-16 items-center justify-center rounded-full', tintBg(this.status()))\n );\n}\n\nconst tintText = (status: XuiResultStatus): string =>\n status === 'success'\n ? 'text-success'\n : status === 'error'\n ? 'text-error'\n : status === 'warning'\n ? 'text-warning'\n : 'text-info';\n\nconst tintBg = (status: XuiResultStatus): string =>\n status === 'success'\n ? 'bg-success/10'\n : status === 'error'\n ? 'bg-error/10'\n : status === 'warning'\n ? 'bg-warning/10'\n : status === 'info'\n ? 'bg-info/10'\n : 'bg-surface-inset';\n","import { XuiResult } from './lib/result';\n\nexport * from './lib/result';\nexport * from './lib/result.token';\n\nexport const XuiResultImports = [XuiResult] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAaO,MAAM,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,GAAG,kBAAkB,CAAkB,iBAAiB,EAAE;AACpH,IAAA,MAAM,EAAE;AACT,CAAA;;ACLD;;;;;;;;;;AAUG;MA4CU,SAAS,CAAA;IACH,MAAM,GAAG,qBAAqB,EAAE
|
|
1
|
+
{"version":3,"file":"xui-result.mjs","sources":["../../../../../../libs/ui/result/xui/src/lib/result.token.ts","../../../../../../libs/ui/result/xui/src/lib/result.ts","../../../../../../libs/ui/result/xui/src/index.ts","../../../../../../libs/ui/result/xui/src/xui-result.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport type { XuiResultStatus } from './result';\n\n/**\n * Application-wide defaults for XuiResult.\n *\n * Provide it once at the app root to change every result page without touching\n * call sites; individual inputs still override the configured value.\n */\nexport interface XuiResultConfig {\n status: XuiResultStatus;\n}\n\nexport const [injectXuiResultConfig, provideXuiResultConfig] = createXConfigToken<XuiResultConfig>('XuiResultConfig', {\n status: 'info'\n});\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound, matCloseRound, matInfoRound, matPriorityHighRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiResultConfig } from './result.token';\n\nexport type XuiResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n/**\n * A result / status page — a large status glyph over a title and subtitle, with\n * optional body content and an `[xuiResultExtra]` action slot. `status` picks the\n * icon and tint (success/error/info/warning) or shows an HTTP code (404/403/500).\n *\n * ```html\n * <xui-result status=\"success\" title=\"Payment received\" subtitle=\"Order #1024 is confirmed.\">\n * <button xuiButton xuiResultExtra>Go home</button>\n * </xui-result>\n * ```\n */\n@Component({\n selector: 'xui-result',\n template: `\n <div [class]=\"iconWrapClass()\">\n @switch (status()) {\n @case ('success') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matCheckRound\" />\n }\n @case ('error') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matCloseRound\" />\n }\n @case ('warning') {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matPriorityHighRound\" />\n }\n @default {\n @if (status() === '404' || status() === '403' || status() === '500') {\n <span class=\"text-foreground-muted text-3xl font-bold tabular-nums\">{{ status() }}</span>\n } @else {\n <ng-icon xui size=\"2.25rem\" [class]=\"glyphClass()\" name=\"matInfoRound\" />\n }\n }\n }\n </div>\n\n @if (title()) {\n <h2 class=\"text-foreground text-xl font-semibold\">{{ title() }}</h2>\n }\n @if (subtitle()) {\n <p class=\"text-foreground-muted max-w-prose\">{{ subtitle() }}</p>\n }\n <div class=\"w-full empty:hidden\"><ng-content /></div>\n <div class=\"mt-4 flex flex-wrap justify-center gap-2 empty:hidden\">\n <ng-content select=\"[xuiResultExtra]\" />\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n imports: [NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matCheckRound, matCloseRound, matInfoRound, matPriorityHighRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiResult {\n private readonly config = injectXuiResultConfig();\n\n /** Extra classes, merged into the component's own rather than replacing them. */\n readonly class = input<ClassValue>('');\n\n /** What happened. Picks the glyph and its tint; the HTTP codes render as the number itself. */\n readonly status = input<XuiResultStatus>(this.config.status);\n /** The headline — what the outcome was. */\n readonly title = input<string>('');\n /** Supporting detail under the title. Project buttons as content for what to do next. */\n readonly subtitle = input<string>('');\n\n protected readonly computedClass = computed(() =>\n xui('flex flex-col items-center gap-3 p-8 text-center', this.class())\n );\n\n protected readonly glyphClass = computed(() => xui(tintText(this.status())));\n protected readonly iconWrapClass = computed(() =>\n xui('mb-2 flex size-16 items-center justify-center rounded-full', tintBg(this.status()))\n );\n}\n\nconst tintText = (status: XuiResultStatus): string =>\n status === 'success'\n ? 'text-success'\n : status === 'error'\n ? 'text-error'\n : status === 'warning'\n ? 'text-warning'\n : 'text-info';\n\nconst tintBg = (status: XuiResultStatus): string =>\n status === 'success'\n ? 'bg-success/10'\n : status === 'error'\n ? 'bg-error/10'\n : status === 'warning'\n ? 'bg-warning/10'\n : status === 'info'\n ? 'bg-info/10'\n : 'bg-surface-inset';\n","import { XuiResult } from './lib/result';\n\nexport * from './lib/result';\nexport * from './lib/result.token';\n\nexport const XuiResultImports = [XuiResult] as const;\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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/result",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.21",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@angular/core": "22",
|
|
40
40
|
"@ng-icons/core": "34",
|
|
41
41
|
"@ng-icons/material-icons": "34",
|
|
42
|
-
"@xui/core": "2.0.0-alpha.
|
|
43
|
-
"@xui/icon": "2.0.0-alpha.
|
|
42
|
+
"@xui/core": "2.0.0-alpha.21",
|
|
43
|
+
"@xui/icon": "2.0.0-alpha.21",
|
|
44
44
|
"clsx": "^2.1.1"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
package/types/xui-result.d.ts
CHANGED
|
@@ -15,9 +15,13 @@ type XuiResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403'
|
|
|
15
15
|
*/
|
|
16
16
|
declare class XuiResult {
|
|
17
17
|
private readonly config;
|
|
18
|
+
/** Extra classes, merged into the component's own rather than replacing them. */
|
|
18
19
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
20
|
+
/** What happened. Picks the glyph and its tint; the HTTP codes render as the number itself. */
|
|
19
21
|
readonly status: _angular_core.InputSignal<XuiResultStatus>;
|
|
22
|
+
/** The headline — what the outcome was. */
|
|
20
23
|
readonly title: _angular_core.InputSignal<string>;
|
|
24
|
+
/** Supporting detail under the title. Project buttons as content for what to do next. */
|
|
21
25
|
readonly subtitle: _angular_core.InputSignal<string>;
|
|
22
26
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
23
27
|
protected readonly glyphClass: _angular_core.Signal<string>;
|