@neovici/cosmoz-form 4.0.0 → 4.1.0

package/dist/add/render.d.ts

@@ -5,10 +5,21 @@ import { UseValidatedForm } from '../use-validated-form-core';
 import { Progress } from './types';
 export declare const nothing$: () => symbol;
 export declare const then$: <P, R>(p$?: PromiseLike<P>, fn?: () => R) => Promise<R>;
+/**
+ * A save failure. `message` is the plain-text summary (toasts, logging);
+ * `content`, when present, is rendered in the failure block instead —
+ * allowing rich markup (e.g. a structured list of row errors). The failure
+ * block renders with `white-space: pre-wrap`, so keep templates free of
+ * indentation whitespace.
+ */
+export interface Failure {
+    message: string;
+    content?: unknown;
+}
 interface RenderAddFields<T extends object> extends UseValidatedForm<T> {
-    error?: Error | {
+    error?: Error | ({
         message: string;
-    };
+    } & Partial<Failure>);
 }
 export declare const renderAddFields: <T extends object>({ error, ...thru }: RenderAddFields<T>) => import("..").Renderable[];
 export declare const renderFailure$: <T>(save$?: PromiseLike<T>) => import("lit-html/directive.js").DirectiveResult<{

package/dist/add/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/add/render.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAKzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,eAAO,MAAM,QAAQ,cAAgB,CAAC;AACtC,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,eAC5B,CAAC;AAElC,UAAU,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACtE,KAAK,CAAC,EAAE,KAAK,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AACD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,EAAE,oBAG/C,eAAe,CAAC,CAAC,CAAC,8BAGpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,QAAQ,WAAW,CAAC,CAAC,CAAC;;EAItD,CAAC;AAEH,UAAU,MAAM;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,UAAU,YAAa,SAAQ,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC;IACtD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC7B;AACD,eAAO,MAAM,aAAa,GAAI,8BAA8B,YAAY;;EAiCvE,CAAC;AAEF,UAAU,aAAa;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,eAAO,MAAM,cAAc,GACzB,CAAC,SAAS,MAAM,EAAE,8CAKhB,aAAa,MACf,sCAAsC,iBAAiB,CAAC,CAAC,CAAC,yCAUpC,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/add/render.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAKzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,eAAO,MAAM,QAAQ,cAAgB,CAAC;AACtC,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,eAC5B,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,WAAW,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAID,UAAU,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACtE,KAAK,CAAC,EAAE,KAAK,GAAG,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;CACzD;AACD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,EAAE,oBAG/C,eAAe,CAAC,CAAC,CAAC,8BAGpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,QAAQ,WAAW,CAAC,CAAC,CAAC;;EAOtD,CAAC;AAEH,UAAU,MAAM;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,UAAU,YAAa,SAAQ,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC;IACtD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC7B;AACD,eAAO,MAAM,aAAa,GAAI,8BAA8B,YAAY;;EAiCvE,CAAC;AAEF,UAAU,aAAa;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,eAAO,MAAM,cAAc,GACzB,CAAC,SAAS,MAAM,EAAE,8CAKhB,aAAa,MACf,sCAAsC,iBAAiB,CAAC,CAAC,CAAC,yCAUpC,CAAC"}

package/dist/add/render.js

@@ -7,11 +7,12 @@ import { when } from 'lit-html/directives/when.js';
 import { renderFields } from '../render';
 export const nothing$ = () => nothing;
 export const then$ = (p$, fn) => Promise.resolve(p$).then(fn, fn);
+const failureHtml = (e) => e.content ?? e.message;
 export const renderAddFields = ({ error, ...thru }) => [
     renderFields(thru),
-    when(error, (err) => html `<div class="failure">${err.message}</div>`),
+    when(error, (err) => html `<div class="failure">${failureHtml(err)}</div>`),
 ];
-export const renderFailure$ = (save$) => until(save$?.then(nothing$, (e) => html `<div class="failure">${e.message}</div>`), nothing);
+export const renderFailure$ = (save$) => until(save$?.then(nothing$, (e) => html `<div class="failure">${failureHtml(e)}</div>`), nothing);
 export const renderButton$ = ({ save$, progress, ...thru }) => {
     const button = ({ onSave, onClick = onSave, title, disabled, progress, content = nothing, slot, }) => html ` <cosmoz-button
 			class="button save"

package/dist/add/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/add/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAmB3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/add/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cA2B3B,CAAC"}

package/dist/add/styles.js

@@ -11,7 +11,15 @@ export const renderAddStyles = () => css `
 		font-size: var(--cz-text-xs);
 		line-height: var(--cz-text-xs-line-height);
 		margin: calc(var(--cz-spacing) * 2) 0;
+		padding: calc(var(--cz-spacing) * 3);
 		color: var(--cz-color-text-error);
+		background: var(--cz-color-bg-error);
+		border: 1px solid var(--cz-color-border-error-subtle);
+		border-radius: var(--cz-radius-lg);
+		white-space: pre-wrap;
+		word-break: break-word;
+		max-height: 40vh;
+		overflow-y: auto;
 	}
 
 	.input-toggle {

package/dist/form-dialog/form-dialog.js

@@ -26,8 +26,8 @@ const FormDialog = (host) => {
 		</style>
 		${when(description, () => html `<div class="description">${description}</div>`)}
 		<div class="form" part="form">${renderFields(form)}</div>
+		${renderFailure$(save$)}
 		<div class="buttons">
-			${renderFailure$(save$)}
 			${renderButton$({ save$, onSave, disabled, title: saveText, progress })}
 			${when(!hideCancelButton, () => html `<cosmoz-button
 						class="button"

package/dist/form-dialog/style.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../src/form-dialog/style.css.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,QAoBX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../src/form-dialog/style.css.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,QA4BX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/form-dialog/style.css.js

@@ -16,8 +16,16 @@ const styles = css `
 
 	.failure {
 		color: var(--cz-color-text-error);
-		align-self: center;
-		flex: 1;
+		background: var(--cz-color-bg-error);
+		border: 1px solid var(--cz-color-border-error-subtle);
+		border-radius: var(--cz-radius-lg);
+		/* spans the dialog body's content box; text inset by its own padding */
+		margin: calc(var(--cz-spacing) * 2) 0;
+		padding: calc(var(--cz-spacing) * 3);
+		white-space: pre-wrap;
+		word-break: break-word;
+		max-height: 40vh;
+		overflow-y: auto;
 	}
 `;
 export default styles;

package/dist/test/form-dialog.test.d.ts

@@ -0,0 +1,2 @@
+import '../form-dialog/form-dialog.js';
+//# sourceMappingURL=form-dialog.test.d.ts.map

package/dist/test/form-dialog.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.test.d.ts","sourceRoot":"","sources":["../../src/test/form-dialog.test.ts"],"names":[],"mappings":"AAGA,OAAO,+BAA+B,CAAC"}

package/dist/test/form-dialog.test.js

@@ -0,0 +1,64 @@
+import { assert, fixture, waitUntil } from '@open-wc/testing';
+import { html } from 'lit-html';
+import '../form-dialog/form-dialog.js';
+// design tokens the alert-card chrome relies on; applied via inline style on
+// the host so they inherit into its shadow root (the app loads them globally)
+const tokenStyle = '--cz-color-bg-error: #fef3f2; --cz-color-border-error-subtle: #fda29b; --cz-radius-lg: 0.625rem; --cz-spacing: 0.25rem; --cz-color-text-error: #d92d20;';
+const LONG_ERROR = Array.from({ length: 8 }, (_, i) => `Row ${1078 + i}: Category 'Sheeeesh' is not valid.`).join(' ');
+const openFailingDialog = async (onSave) => {
+    const el = (await fixture(html `
+		<cosmoz-form-dialog
+			heading="Test"
+			style=${tokenStyle}
+			.fields=${[]}
+			.initial=${{}}
+			.onSave=${onSave}
+		></cosmoz-form-dialog>
+	`));
+    const root = el.shadowRoot;
+    const save = root.querySelector('.buttons .save');
+    assert.ok(save, 'save button rendered');
+    save.click();
+    await waitUntil(() => root.querySelector('.failure') != null);
+    return { el, root };
+};
+suite('cosmoz-form-dialog failure rendering', () => {
+    test('failure renders above the footer, not inside the buttons row', async () => {
+        const { root } = await openFailingDialog(() => Promise.reject(new Error('Short failure')));
+        const failure = root.querySelector('.failure'), buttons = root.querySelector('.buttons');
+        assert.include(failure.textContent ?? '', 'Short failure');
+        assert.isNull(buttons.querySelector('.failure'), 'footer must contain only buttons');
+        assert.isTrue(failure.compareDocumentPosition(buttons) ===
+            Node.DOCUMENT_POSITION_FOLLOWING, 'failure block precedes the footer');
+    });
+    test('long failure is capped and scrollable', async () => {
+        const { root } = await openFailingDialog(() => Promise.reject(new Error(LONG_ERROR)));
+        const failure = root.querySelector('.failure');
+        const style = getComputedStyle(failure);
+        assert.equal(style.overflowY, 'auto');
+        // 40vh resolves to a px value; assert it is a bounded, finite cap
+        assert.isTrue(style.maxHeight.endsWith('px'));
+        assert.isBelow(Number.parseFloat(style.maxHeight), 500);
+        assert.equal(style.whiteSpace, 'pre-wrap');
+    });
+    test('failure renders as an error alert card', async () => {
+        const { root } = await openFailingDialog(() => Promise.reject(new Error(LONG_ERROR)));
+        const style = getComputedStyle(root.querySelector('.failure'));
+        assert.notEqual(style.backgroundColor, 'rgba(0, 0, 0, 0)', 'has a tinted background');
+        assert.notEqual(style.borderWidth, '0px', 'has a border');
+        assert.notEqual(style.borderRadius, '0px', 'is rounded');
+    });
+    test('rich failure content (e.content) renders instead of the message', async () => {
+        const { root } = await openFailingDialog(() => {
+            const err = new Error('The file contains 3 errors');
+            err.content = html `
+				<div><b>The file contains 3 errors</b></div>
+				<div name="row-1">Row 1078: Category 'Sheeeesh' is not valid.</div>
+			`;
+            return Promise.reject(err);
+        });
+        const failure = root.querySelector('.failure');
+        assert.equal(failure.querySelector('b')?.textContent, 'The file contains 3 errors');
+        assert.include(failure.querySelector('[name="row-1"]')?.textContent ?? '', 'Row 1078: Category \'Sheeeesh\' is not valid.');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-form",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A pionjs component",
   "keywords": [
     "web-components",