@neovici/cosmoz-form 3.5.0 → 4.1.0

package/dist/add/render.d.ts

@@ -1,12 +1,25 @@
+import '@neovici/cosmoz-button';
+import '@neovici/cosmoz-spinner';
 import { nothing } from 'lit-html';
-import { Progress } from './types';
 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,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAKzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,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

@@ -1,17 +1,20 @@
+import '@neovici/cosmoz-button';
+import '@neovici/cosmoz-spinner';
 import { html, nothing } from 'lit-html';
-import { until } from 'lit-html/directives/until.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { until } from 'lit-html/directives/until.js';
 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 ` <button
+    const button = ({ onSave, onClick = onSave, title, disabled, progress, content = nothing, slot, }) => html ` <cosmoz-button
 			class="button save"
 			slot=${ifDefined(slot)}
 			?disabled=${disabled}
@@ -22,12 +25,12 @@ export const renderButton$ = ({ save$, progress, ...thru }) => {
     }}
 		>
 			${content} ${title}
-		</button>`;
+		</cosmoz-button>`;
     return until(then$(save$, () => button(thru)), button({
         ...thru,
         disabled: true,
         progress: true,
-        content: html `<cz-spinner></cz-spinner> ${when(progress, (p) => p.join('/'))}`,
+        content: html `<cosmoz-spinner></cosmoz-spinner> ${when(progress, (p) => p.join('/'))}`,
     }));
 };
 export const renderAddForm$ = ({ button: buttonTitle, tab, tabCard = tab, hash, }) => ({ disabled, save$, onSave, ...pass }) => html ` <cosmoz-tabs class="flex" hash-param=${ifDefined(hash)}>

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,cAuC3B,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

@@ -7,36 +7,24 @@ export const renderAddStyles = () => css `
 		height: 100%;
 	}
 
-	.forbidden {
-		font-size: 16px;
-	}
-
 	.failure {
-		font-size: 12px;
-		line-height: 20px;
-		margin: 8px 0;
-	}
-
-	.failure,
-	.forbidden {
-		color: var(--error-color, #fc5c5b);
-	}
-
-	.input-common::part(float) {
-		font-size: 14px;
-		line-height: 20px;
+		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 {
-		margin-top: 0.875em;
-	}
-
-	cosmoz-tab-card::part(content) {
-		padding-bottom: 24px;
+		margin-block: calc(var(--cz-spacing) * 2);
 	}
 
 	${buttonStyles}
-	.button cz-spinner {
-		margin-right: 8px;
-	}
 `;

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

@@ -1,10 +1,11 @@
+import '@neovici/cosmoz-button';
 import { Props as DialogProps } from '@neovici/cosmoz-dialog';
 import '@neovici/cosmoz-dialog/loading';
-import '@neovici/cosmoz-spinner';
 import { Renderable, Resolvable } from '../types';
 import { Props as AddProps } from '../use-validated-form$';
 interface Props<T extends object> extends DialogProps, AddProps<T> {
     heading: string;
+    subtitle?: string;
     description?: Renderable;
     auto?: boolean;
     uncancelable?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/form-dialog/form-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AAWjC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AAG9E,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAiDD,MAAM,WAAW,MAAM,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,KAAK,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAG,UAkBhE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAC3C,aAAa,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;;;;cAO7C,CAAC"}
+{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/form-dialog/form-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAU,KAAK,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,gCAAgC,CAAC;AAWxC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AAE9E,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAyDD,MAAM,WAAW,MAAM,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,KAAK,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAG,UAoBhE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAC3C,aAAa,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;;;;cAO7C,CAAC"}

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

@@ -1,6 +1,6 @@
+import '@neovici/cosmoz-button';
 import { dialog } from '@neovici/cosmoz-dialog';
 import '@neovici/cosmoz-dialog/loading';
-import '@neovici/cosmoz-spinner';
 import { invoke$ } from '@neovici/cosmoz-utils/promise';
 import { useEffect } from '@pionjs/pion';
 import { t } from 'i18next';
@@ -24,14 +24,19 @@ const FormDialog = (host) => {
     return html ` <style>
 			${buttonStyles} ${renderStyles(form)}${styles}
 		</style>
-		${when(description, () => html `<p class="description">${description}</p>`)}
+		${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 `<button class="button" value="cancel" ?disabled=${uncancelable}>
+			${when(!hideCancelButton, () => html `<cosmoz-button
+						class="button"
+						variant="secondary"
+						value="cancel"
+						?disabled=${uncancelable}
+					>
 						${t('Cancel')}
-					</button>`)}
+					</cosmoz-button>`)}
 		</div>`;
 };
 customElements.define('cosmoz-form-dialog', dialog(FormDialog, { observedAttributes: ['allow-empty'] }));
@@ -44,6 +49,8 @@ export const formDialog = (props) => {
 		name=${ifDefined(props.name)}
 		?allow-empty=${props.allowEmpty}
 		.heading=${props.heading}
+		.subtitle=${props.subtitle}
+		.icon=${props.icon}
 		.description=${props.description}
 		.fields=${props.fields}
 		.initial=${props.initial}

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,QAwCX,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

@@ -1,43 +1,31 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
 const styles = css `
 	.description {
-		padding: 0 24px;
-		/* scrollable, so a long description can't push the buttons out of the
-		   dialog's clipped content area */
-		overflow-y: auto;
-		min-height: 0;
+		font-size: var(--cz-text-base);
+		line-height: var(--cz-text-base-line-height);
+		color: var(--cz-color-text-secondary);
+		margin-block: calc(var(--cz-spacing) * 4);
 	}
 	.description * {
 		line-height: normal;
 	}
 	.form {
-		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 	}
-	.input {
-		margin-top: 20px;
-		padding: 0px 24px 4px 24px;
-	}
-	.input:last-child {
-		margin-bottom: 16px;
-	}
-	.buttons {
-		flex: none;
-	}
-	.save {
-		font-weight: bold;
-	}
-	.save[data-progress] {
-		opacity: 0.6;
-	}
+
 	.failure {
-		color: #fc5c5b;
-		align-self: center;
-		flex: 1;
-	}
-	cz-spinner {
-		align-self: center;
+		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);
+		/* 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/inputs/autocomplete.d.ts

@@ -9,6 +9,8 @@ type OptionsOpts<T, V, C> = {
 };
 export interface AutocompleteProps<T extends object, K extends keyof T, V extends T[K], C extends object> {
     options?: Resolvable<unknown[] | false | undefined, [OptionsOpts<T, V, C>]>;
+    mode?: 'select';
+    variant?: 'cell';
     limit?: number;
     textProperty?: string;
     valueProperty?: string;
@@ -19,6 +21,7 @@ export interface AutocompleteProps<T extends object, K extends keyof T, V extend
     preserveOrder?: boolean;
     itemRenderer?: unknown;
     chipRenderer?: unknown;
+    required?: boolean;
     textual?: unknown;
     externalSearch?: boolean;
     itemHeight?: number | 'auto';

package/dist/inputs/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/inputs/autocomplete.ts"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,iBAAiB,CACjC,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM;IAEhB,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAOD,eAAO,MAAM,YAAY,GACvB,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,+HAyEtE,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/inputs/autocomplete.ts"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,iBAAiB,CACjC,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM;IAEhB,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAOD,eAAO,MAAM,YAAY,GACvB,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,+HA2EtE,CAAC"}

package/dist/inputs/autocomplete.js

@@ -5,16 +5,17 @@ import { live } from 'lit-html/directives/live.js';
 import '@neovici/cosmoz-autocomplete';
 import { input } from './base';
 import { renderContents } from './render';
-export const autocomplete = input(({ id, label, noLabelFloat, alwaysFloatLabel, error, warning, suffix, disabled, onChange, onPaste, options, limit, min, textProperty, valueProperty, value, values, itemRenderer, chipRenderer, keepOpened, keepQuery, placeholder, wrap, showSingle, preserveOrder, title, textual, description, externalSearch, itemHeight, context, ...thru }) => {
+export const autocomplete = input(({ id, variant, label, error, required, warning, suffix, mode, disabled, onChange, options, limit, min, textProperty, valueProperty, value, values, itemRenderer, chipRenderer, keepOpened, keepQuery, placeholder, wrap, showSingle, preserveOrder, title, textual, description, externalSearch, itemHeight, context, ...thru }) => {
     return html `<cosmoz-autocomplete
 			class="input input-autocomplete"
+			mode=${ifDefined(mode)}
+			variant=${ifDefined(variant)}
 			?data-warning=${!!warning}
 			name=${id}
 			?disabled=${disabled}
 			?wrap=${wrap}
-			?no-label-float=${noLabelFloat}
-			?always-float-label=${alwaysFloatLabel}
 			?invalid=${!!error}
+			?required=${required}
 			?keep-opened=${!!keepOpened}
 			?keep-query=${!!keepQuery}
 			?show-single=${!!showSingle}
@@ -35,8 +36,7 @@ export const autocomplete = input(({ id, label, noLabelFloat, alwaysFloatLabel,
 			.itemHeight=${itemHeight}
 			.title=${ifDefined(title)}
 			.textual=${textual}
-			.onChange=${(options) => onChange((limit === 1 ? options?.[0] : options))}
-			@paste=${onPaste}
+			.onChange=${(options) => onChange((limit === 1 || mode === 'select' ? options?.[0] : options))}
 			?external-search=${externalSearch}
 			>${renderContents({ suffix, warning, description })}</cosmoz-autocomplete
 		>`;

package/dist/inputs/base.d.ts

@@ -4,6 +4,7 @@ type ComputedRenderOpts<T extends object, K extends keyof T, V extends T[K]> = {
     label: string;
     placeholder?: string;
     disabled?: boolean;
+    required?: boolean;
     warning?: Renderable;
     prefix?: Renderable;
     suffix?: Renderable;

package/dist/inputs/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/inputs/base.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAY,MAAM,UAAU,CAAC;AAGnE,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI;IAC9E,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,UAAU,CACd,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,GAAG,MAAM,IACtB,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;AAE5E,MAAM,MAAM,cAAc,CACzB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACrB,CAAC,SAAS,MAAM,GAAG,MAAM,IACtB,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAC7D,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAC3B,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AA+BxB,eAAO,MAAM,KAAK,GAEhB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,GAAG,MAAM,EAEzB,QAAQ,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,UAAU,MAErD,8DAOE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAG,UA2C3B,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/inputs/base.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAY,MAAM,UAAU,CAAC;AAGnE,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI;IAC9E,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,UAAU,CACd,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,GAAG,MAAM,IACtB,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;AAE5E,MAAM,MAAM,cAAc,CACzB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACrB,CAAC,SAAS,MAAM,GAAG,MAAM,IACtB,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAC7D,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAC3B,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AA+BxB,eAAO,MAAM,KAAK,GAEhB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,GAAG,MAAM,EAEzB,QAAQ,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,UAAU,MAErD,8DAOE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAG,UA+B3B,CAAC"}

package/dist/inputs/base.js

@@ -18,9 +18,6 @@ export const input = (render) => ({ field, value, values, onChange: update, cont
     const onChange = (value, touched) => (field.onChange ?? defaultOnChange)(
     // intercept the update and pass touched
     (a) => update(a, touched), field.path ?? field.id, invokeValue(field.value?.[1], value, values, field, context), values);
-    const mandatory = invoke(field.mandatory ?? isRequired(field.validate), value, values, field, context)
-        ? ' *'
-        : undefined;
     const hidden = invoke(field.hidden, value, values, field, context);
     if (hidden)
         return;
@@ -29,10 +26,8 @@ export const input = (render) => ({ field, value, values, onChange: update, cont
         ...thru,
         context,
         values,
-        label: [
-            invoke(field.label, value, values, field, context),
-            mandatory,
-        ].join(''),
+        required: isRequired(field.validate),
+        label: invoke(field.label, value, values, field, context),
         placeholder: invoke(field.placeholder, value, values, field, context),
         disabled: invoke(field.disabled, value, values, field, context),
         warning: invoke(field.warning, value, values, field, context),

package/dist/inputs/common.d.ts

@@ -3,8 +3,8 @@ import '@neovici/cosmoz-input/textarea';
 import type { Field, InputBaseOpts, Invokable } from '../types';
 export interface CommonFieldProps<T extends object, K extends keyof T, V extends T[K], C extends object = object> {
     title?: string;
-    noLabelFloat?: boolean;
-    alwaysFloatLabel?: boolean;
+    variant?: 'cell';
+    hint?: string;
     allowedPattern?: string | RegExp;
     step?: string;
     maxlength?: number;

package/dist/inputs/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/inputs/common.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/inputs/common.ts"],"names":[],"mappings":"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"}

package/dist/inputs/common.js

@@ -8,15 +8,16 @@ import { input } from './base';
 import { renderContents } from './render';
 export const common = (props) => {
     const { value, values, onFocus, onInput, onPaste, context, ...field } = props;
-    const { id, type = 'text', label, placeholder, noLabelFloat, alwaysFloatLabel, error, prefix, suffix, warning, allowedPattern, step, disabled, maxlength, min, max, autosize, noSpinner, autocomplete, title, description, } = field;
+    const { id, variant, type = 'text', label, placeholder, error, prefix, suffix, warning, allowedPattern, step, disabled, required, maxlength, min, max, autosize, noSpinner, autocomplete, title, description, hint, } = field;
     return html `<cosmoz-input
 		class="input input-common input-${type}"
+		variant=${ifDefined(variant)}
+		hint=${ifDefined(hint)}
 		name=${id}
 		type=${type}
 		?autosize=${autosize}
 		?disabled=${disabled}
-		?no-label-float=${noLabelFloat}
-		?always-float-label=${alwaysFloatLabel}
+		?required=${required}
 		?invalid=${!!error}
 		?no-spinner=${!!noSpinner}
 		.placeholder=${placeholder}
@@ -56,11 +57,10 @@ export const color = input(({ onChange, ...props }) => common({
     type: 'color',
     onInput: (e) => onChange(e.target.value),
 }));
-export const textarea = input(({ id, label, placeholder, noLabelFloat, error, suffix, warning, disabled, onChange, onPaste, value, maxRows, rows, maxlength, }) => html `<cosmoz-textarea
+export const textarea = input(({ id, label, placeholder, error, suffix, warning, disabled, onChange, onPaste, value, maxRows, rows, maxlength, }) => html `<cosmoz-textarea
 			class="input input-textarea"
 			name=${id}
 			?disabled=${disabled}
-			?no-label-float=${noLabelFloat}
 			?invalid=${!!error}
 			.placeholder=${placeholder}
 			.errorMessage=${error}

package/dist/inputs/date-range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-range.d.ts","sourceRoot":"","sources":["../../src/inputs/date-range.ts"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACb;AA2DD,eAAO,MAAM,SAAS,GA/CnB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,wIA4CwB,EAC1C,aAAa,GAhDX,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,wIA6C0B,EAG5C,YAAY,GAAI,QAAQ,KAAK;;;CAI3B,CAAC"}
+{"version":3,"file":"date-range.d.ts","sourceRoot":"","sources":["../../src/inputs/date-range.ts"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACb;AA8DD,eAAO,MAAM,SAAS,GAlDnB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,wIA+CwB,EAC1C,aAAa,GAnDX,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,MAAM,wIAgD0B,EAG5C,YAAY,GAAI,QAAQ,KAAK;;;CAI3B,CAAC"}

package/dist/inputs/date-range.js

@@ -5,13 +5,14 @@ import { live } from 'lit-html/directives/live.js';
 import { missing } from '../validation';
 import { input } from './base';
 const checkFormat = (value) => value === undefined || typeof value === 'object';
-const _dateRange = (type) => input(({ id, label, error, warning, disabled, onChange, value, }) => {
+const _dateRange = (type) => input(({ id, label, variant, error, warning, disabled, onChange, value, }) => {
     if (!checkFormat(value))
         return;
     return [
         html `<cosmoz-input
 					class="input input-date-range"
 					type=${type}
+					variant=${ifDefined(variant)}
 					?data-warning=${!!warning}
 					name=${String(id) + 'From'}
 					?disabled=${disabled}
@@ -25,6 +26,7 @@ const _dateRange = (type) => input(({ id, label, error, warning, disabled, onCha
         html `<cosmoz-input
 					class="input input-date-range"
 					type=${type}
+					variant=${ifDefined(variant)}
 					?data-warning=${!!warning}
 					name=${String(id) + 'To'}
 					?disabled=${disabled}

package/dist/inputs/inline-file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-file.d.ts","sourceRoot":"","sources":["../../src/inputs/inline-file.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe,QAkB3B,CAAC;AAkCF,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,oIAuCpD,CAAC"}
+{"version":3,"file":"inline-file.d.ts","sourceRoot":"","sources":["../../src/inputs/inline-file.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe,QAe3B,CAAC;AAeF,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,oIA4CpD,CAAC"}

package/dist/inputs/inline-file.js

@@ -1,3 +1,4 @@
+import { fileAttachment02Icon } from '@neovici/cosmoz-icons/untitled';
 import { tagged as css } from '@neovici/cosmoz-utils';
 import { invoke, noop } from '@neovici/cosmoz-utils/function';
 import { t } from 'i18next';
@@ -10,10 +11,7 @@ import { text } from './common';
 export const inlineFileStyle = css `
 	.input-inline-file {
 		position: relative;
-	}
-
-	.input-inline-file svg {
-		margin-right: 5px;
+		margin-bottom: calc(var(--cz-spacing) * 4);
 	}
 
 	.input-inline-file > .file {
@@ -26,24 +24,6 @@ export const inlineFileStyle = css `
 		cursor: pointer;
 	}
 `;
-const icon = html `<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="18"
-	height="18"
-	viewBox="0 0 24 24"
->
-	<g
-		fill="none"
-		stroke="#000"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-	>
-		<path
-			d="M18 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7.1a2 2 0 0 1 1.5.6l4.9 5.2a2 2 0 0 1 .5 1.4V20a2 2 0 0 1-2 2ZM7.9 17.5h8.2M7.9 13.5h8.2M8 9.5h5"
-		/>
-	</g>
-</svg>`;
 const humanLabel = (value) => {
     if (!value)
         return t('Choose file');
@@ -57,7 +37,12 @@ const humanLabel = (value) => {
 export const inlineFile = input(({ id, label, value, values, onChange, accept, multiple, disabled, }) => html `<div class="input input-inline-file" name=${id}>
 			${text({
     value: humanLabel(value),
-    field: { label, disabled, prefix: icon, id },
+    field: {
+        label,
+        disabled,
+        prefix: fileAttachment02Icon({ styles: 'vertical-align: middle;' }),
+        id,
+    },
     error: false,
     invalid: false,
     load: noop,

package/dist/inputs/read-only-number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"read-only-number.d.ts","sourceRoot":"","sources":["../../src/inputs/read-only-number.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,WAAW,mBAAmB;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AASD,eAAO,MAAM,cAAc,GAC1B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACb,2CAMC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA8BrB,CAAC"}
+{"version":3,"file":"read-only-number.d.ts","sourceRoot":"","sources":["../../src/inputs/read-only-number.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,WAAW,mBAAmB;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AASD,eAAO,MAAM,cAAc,GAC1B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACb,2CAMC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAuBrB,CAAC"}

package/dist/inputs/read-only-number.js

@@ -9,7 +9,7 @@ const formatter = new Intl.NumberFormat(undefined, {
 });
 const defaultFormat = (value) => formatter.format(ensureNumber(value));
 export const readOnlyNumber = ({ value, values, field, error, context, }) => {
-    const { id, suffix, warning, label, format = defaultFormat, noLabelFloat, } = field;
+    const { id, suffix, warning, label, variant, format = defaultFormat } = field;
     return [
         html `<style>
 			cosmoz-input[disabled] {
@@ -18,10 +18,10 @@ export const readOnlyNumber = ({ value, values, field, error, context, }) => {
 		</style>`,
         html `<cosmoz-input
 			class="input input-common input-number"
+			variant=${ifDefined(variant)}
 			.label=${label}
 			name="${id}"
 			disabled
-			?no-label-float=${ifDefined(noLabelFloat)}
 			.value=${format(value)}
 			?invalid=${!!error}
 			.errorMessage=${error}

package/dist/inputs/render.d.ts

@@ -1,8 +1,8 @@
-import { Renderable } from '../types';
+import { Renderable } from '@pionjs/pion';
 export declare const renderPrefix: <T>(prefix: T) => T extends false | "" | 0 | 0n | null | undefined ? undefined : import("lit-html").TemplateResult<1>;
 export declare const renderSuffix: <T>(suffix: T) => T extends false | "" | 0 | 0n | null | undefined ? undefined : import("lit-html").TemplateResult<1>;
-export declare const renderWarning: <T>(msg?: T, slot?: string) => (T extends false | "" | 0 | 0n | null | undefined ? undefined : import("lit-html").TemplateResult<1>) | undefined;
-export declare const renderDescription: <T>(description?: T, slot?: string) => (T extends false | "" | 0 | 0n | null | undefined ? undefined : import("lit-html").TemplateResult<1>) | undefined;
+export declare const renderWarning: (msg: Renderable, slot?: string) => import("lit-html").TemplateResult<1> | undefined;
+export declare const renderDescription: (description: Renderable, slot?: string) => import("lit-html").TemplateResult<1> | undefined;
 export declare const renderContents: ({ prefix, suffix, warning, description, }: {
     prefix?: Renderable;
     suffix?: Renderable;

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

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/inputs/render.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,QAAQ,CAAC,wGACsB,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,QAAQ,CAAC,wGACsB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,MAAM,CAAC,EAAE,aAAe,sHASvD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAE,cAAc,CAAC,EAAE,aAAe,sHAUnE,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,2CAK5B;IACF,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC;CACzB,yDAKA,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/inputs/render.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,QAAQ,CAAC,wGACsB,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,QAAQ,CAAC,wGACsB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,KAAK,UAAU,EAAE,aAAe,qDAS5D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,aAAa,UAAU,EAAE,aAAe,qDAUxE,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,2CAK5B;IACF,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC;CACzB,yDAKA,CAAC"}

package/dist/inputs/render.js

@@ -1,21 +1,21 @@
+import { alertCircleIcon, helpCircleIcon, } from '@neovici/cosmoz-icons/untitled';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
-import { warningIcon, helpOutlineIcon } from '@neovici/cosmoz-icons';
 export const renderPrefix = (prefix) => when(prefix, () => html `<span slot="prefix">${prefix}</span>`);
 export const renderSuffix = (suffix) => when(suffix, () => html `<span slot="suffix">${suffix}</span>`);
-export const renderWarning = (msg, slot = 'suffix') => when(msg, () => warningIcon({
+export const renderWarning = (msg, slot = 'suffix') => when(msg, () => alertCircleIcon({
     slot,
     title: msg,
     width: '22',
     height: '22',
-    styles: 'color: var(--paper-amber-500); vertical-align: middle',
+    styles: 'color: var(--cz-color-text-warning); vertical-align: middle',
 }));
-export const renderDescription = (description, slot = 'suffix') => when(description, () => helpOutlineIcon({
+export const renderDescription = (description, slot = 'suffix') => when(description, () => helpCircleIcon({
     slot,
     title: description,
     width: '22',
     height: '22',
-    styles: 'color: var(--cz-text-color); vertical-align: middle; cursor: help',
+    styles: 'color: var(--cz-color-text-primary); vertical-align: middle; cursor: help',
 }));
 export const renderContents = ({ prefix, suffix, warning, description, }) => [
     renderPrefix(prefix),

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

@@ -1 +1 @@
-{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../src/render/items.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,GAAG,eAAgB,CAAC;AAC1B,KAAK,IAAI,GAAG,OAAO,CAAC;IAAE,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAOxC,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,IAAI,sBAGpC,CAAC;AAIZ,eAAO,MAAM,uBAAuB,yBAC8B,CAAC;AAEnE,UAAU,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpD;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACnE,QAAQ,CAAC,EACT,OAAO,MAAM,EACb,0EAQG,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KACjB,cAwBK,CAAC;AAET,QAAA,MAAM,kBAAkB,GAAI,CAAC,EAAE,MAAM,CAAC,KAAG,CACH,CAAC;AAEvC,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IACvE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,UAAU,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACxC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,uGAWtE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,sBAqCZ,CAAC;AAET,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,aAE5E;IACF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACrB,WAGA,CAAC"}
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../src/render/items.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,GAAG,eAAgB,CAAC;AAC1B,KAAK,IAAI,GAAG,OAAO,CAAC;IAAE,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAOxC,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,IAAI,sBAQ7B,CAAC;AAInB,eAAO,MAAM,uBAAuB,yBAC8B,CAAC;AAEnE,UAAU,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpD;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACnE,QAAQ,CAAC,EACT,OAAO,MAAM,EACb,0EAQG,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KACjB,cAwBK,CAAC;AAET,QAAA,MAAM,kBAAkB,GAAI,CAAC,EAAE,MAAM,CAAC,KAAG,CACH,CAAC;AAEvC,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IACvE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,UAAU,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACxC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,uGAWtE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,sBAqCZ,CAAC;AAET,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,aAE5E;IACF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACrB,WAGA,CAAC"}

package/dist/render/items.js

@@ -11,9 +11,14 @@ const mkDefaults = (defaults) => {
     const newly = { ...defaults };
     return Object.assign(newly, { [key]: newly });
 };
-export const renderRemove = (remove) => html `<button class="remove" ?disabled=${!remove} @click=${remove}>
-		${xCloseIcon({ width: '20', height: '20' })}
-	</button>`;
+export const renderRemove = (remove) => html `<cosmoz-button
+		variant="destructive"
+		size="sm"
+		?disabled=${!remove}
+		@click=${remove}
+	>
+		${xCloseIcon()}
+	</cosmoz-button>`;
 // An empty cell the size of the remove button, used to keep the columns
 // aligned in rows that have no remove button (the header and the add row).
 export const renderRemovePlaceholder = () => html `<span class="remove-placeholder" aria-hidden="true"></span>`;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/render/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,QAqElB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/render/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,QAoDlB,CAAC"}