@neovici/cosmoz-form 0.0.0 → 1.0.1

package/dist/add/index.d.ts

@@ -0,0 +1,3 @@
+export * from './render';
+export * from './styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/add/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/add/index.js

@@ -0,0 +1,2 @@
+export * from './render';
+export * from './styles';

package/dist/add/render.d.ts

@@ -0,0 +1,44 @@
+import { nothing } from 'lit-html';
+import { Progress } from './types';
+import { UseValidatedForm } from '../use-validated-form-core';
+export declare const nothing$: () => symbol;
+export declare const then$: <P, R>(p$?: PromiseLike<P>, fn?: () => R) => Promise<R>;
+interface RenderAddFields<T extends object> extends UseValidatedForm<T> {
+    error?: Error | {
+        message: string;
+    };
+}
+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<{
+    new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/until.js").UntilDirective<typeof nothing | PromiseLike<symbol | import("lit-html").TemplateResult<1>> | undefined>;
+}>;
+interface Button {
+    slot?: string;
+    content?: unknown;
+    progress?: boolean;
+    disabled?: boolean;
+    title: string;
+    onSave: () => void;
+    onClick?: () => void;
+}
+interface RenderButton extends Omit<Button, 'progress'> {
+    progress?: Progress;
+    save$?: PromiseLike<unknown>;
+}
+export declare const renderButton$: ({ save$, progress, ...thru }: RenderButton) => import("lit-html/directive.js").DirectiveResult<{
+    new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<import("lit-html").TemplateResult<1>>>;
+}>;
+interface RenderAddForm {
+    button: string;
+    tab: string;
+    tabCard?: string;
+    hash?: string;
+}
+interface RenderAddFormOpts<T extends object> extends RenderAddFields<T> {
+    disabled?: boolean;
+    save$?: PromiseLike<unknown>;
+    onSave: () => void;
+}
+export declare const renderAddForm$: <T extends object>({ button: buttonTitle, tab, tabCard, hash, }: RenderAddForm) => ({ disabled, save$, onSave, ...pass }: RenderAddFormOpts<T>) => import("lit-html").TemplateResult<1>;
+export {};
+//# sourceMappingURL=render.d.ts.map

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

@@ -0,0 +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"}

package/dist/add/render.js

@@ -0,0 +1,42 @@
+import { html, nothing } from 'lit-html';
+import { until } from 'lit-html/directives/until.js';
+import { ifDefined } from 'lit-html/directives/if-defined.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);
+export const renderAddFields = ({ error, ...thru }) => [
+    renderFields(thru),
+    when(error, (err) => html `<div class="failure">${err.message}</div>`),
+];
+export const renderFailure$ = (save$) => until(save$?.then(nothing$, (e) => html `<div class="failure">${e.message}</div>`), nothing);
+export const renderButton$ = ({ save$, progress, ...thru }) => {
+    const button = ({ onSave, onClick = onSave, title, disabled, progress, content = nothing, slot, }) => html ` <button
+			class="button save"
+			slot=${ifDefined(slot)}
+			?disabled=${disabled}
+			?data-progress=${progress}
+			@click=${(ev) => {
+        ev.stopPropagation();
+        return onClick();
+    }}
+		>
+			${content} ${title}
+		</button>`;
+    return until(then$(save$, () => button(thru)), button({
+        ...thru,
+        disabled: true,
+        progress: true,
+        content: html `<cz-spinner></cz-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)}>
+				<cosmoz-tab name="overview" heading=${tab}>
+					<cosmoz-tab-card heading=${tabCard}>
+						${renderFields(pass)} ${renderFailure$(save$)}
+					</cosmoz-tab-card>
+				</cosmoz-tab>
+			</cosmoz-tabs>
+			<cosmoz-bottom-bar active>
+				${renderButton$({ save$, onSave, disabled, title: buttonTitle })}
+			</cosmoz-bottom-bar>`;

package/dist/add/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const renderAddStyles: () => string;
+//# sourceMappingURL=styles.d.ts.map

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

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

package/dist/add/styles.js

@@ -0,0 +1,42 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+import buttonStyles from '../styles/button';
+export const renderAddStyles = () => css `
+	:host {
+		display: flex;
+		flex-direction: column;
+		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;
+	}
+
+	.input-toggle {
+		margin-top: 0.875em;
+	}
+
+	cosmoz-tab-card::part(content) {
+		padding-bottom: 24px;
+	}
+
+	${buttonStyles}
+	.button cz-spinner {
+		margin-right: 8px;
+	}
+`;

package/dist/add/types.d.ts

@@ -0,0 +1,4 @@
+type ProgressValue = string | number;
+export type Progress = [ProgressValue, ProgressValue];
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/add/types.ts"],"names":[],"mappings":"AAAA,KAAK,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AACrC,MAAM,MAAM,QAAQ,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC"}

package/dist/add/types.js

@@ -0,0 +1 @@
+export {};

package/dist/controls/cz-toggle.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cz-toggle.d.ts.map

package/dist/controls/cz-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cz-toggle.d.ts","sourceRoot":"","sources":["../../src/controls/cz-toggle.ts"],"names":[],"mappings":""}

package/dist/controls/cz-toggle.js

@@ -0,0 +1,40 @@
+import { css, sheet } from '@neovici/cosmoz-utils';
+import { component, html, useCallback } from '@pionjs/pion';
+import { live } from 'lit-html/directives/live.js';
+import { when } from 'lit-html/directives/when.js';
+import toggleStyles from '../styles/toggle';
+const CzToggle = (host) => {
+    const { label, value, disabled, error } = host;
+    const onChange = useCallback((e) => host.dispatchEvent(new CustomEvent('change', {
+        detail: e.target.checked,
+    })), []);
+    return html `<input
+			id="toggle"
+			class="toggle"
+			part="toggle"
+			type="checkbox"
+			.checked=${live(!!value)}
+			?disabled=${disabled}
+			@change=${onChange}
+		/>
+		${when(label, () => html `<label for="toggle">${label}</label>`)}
+		<slot name="suffix"></slot>
+		${when(error, (error) => html `<div class="failure">${error}</div>`)} `;
+};
+const style = css `
+	${toggleStyles}
+
+	:host {
+		display: block;
+	}
+
+	:host > * {
+		vertical-align: middle;
+		line-height: 0px;
+	}
+
+	::slotted(*) {
+		margin-left: 5px;
+	}
+`;
+customElements.define('cz-toggle', component(CzToggle, { styleSheets: [sheet(style)] }));

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

@@ -0,0 +1,27 @@
+import { Props as DialogProps } from '@neovici/cosmoz-dialog-next';
+import '@neovici/cosmoz-dialog-next/loading';
+import { Props as AddProps } from '../use-validated-form$';
+import '@neovici/cosmoz-spinner';
+import { Renderable, Resolvable } from '../types';
+interface Props<T extends object> extends DialogProps, AddProps<T> {
+    heading: string;
+    description?: Renderable;
+    auto?: boolean;
+    uncancelable?: boolean;
+    hideCancelButton?: boolean;
+    saveText?: string;
+}
+export interface Dialog<T extends object> extends Props<T> {
+    name?: string;
+    title?: string;
+    renderInPortal?: boolean;
+    backdrop?: boolean;
+}
+export declare const formDialog: <T extends object>(props?: Dialog<T>) => Renderable;
+export declare const formDialog$: <T extends object>(props$: Resolvable<Dialog<T>>) => import("lit-html/directive.js").DirectiveResult<{
+    new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
+        toString(): string;
+    } | readonly Renderable[] | null | undefined>>;
+}>;
+export {};
+//# sourceMappingURL=form-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/form-dialog/form-dialog.ts"],"names":[],"mappings":"AAMA,OAAO,EAAU,KAAK,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,qCAAqC,CAAC;AAI7C,OAAO,EAAqB,KAAK,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,yBAAyB,CAAC;AAIjC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,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;AA2CD,MAAM,WAAW,MAAM,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,KAAK,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;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,EAAE,QAAQ,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;;;;EAIzE,CAAC"}

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

@@ -0,0 +1,61 @@
+import { useEffect } from '@pionjs/pion';
+import { html, nothing } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { _ } from '@neovici/cosmoz-i18next';
+import { portal } from '@neovici/cosmoz-utils/directives/portal';
+import { dialog } from '@neovici/cosmoz-dialog-next';
+import '@neovici/cosmoz-dialog-next/loading';
+import buttonStyles from '../styles/button';
+import { renderFields, renderStyles } from '../render';
+import { renderFailure$, renderButton$ } from '../add/render';
+import { useValidatedForm$ } from '../use-validated-form$';
+import '@neovici/cosmoz-spinner';
+import styles from './style.css';
+import { invoke } from '@neovici/cosmoz-utils/function';
+import { until } from 'lit-html/directives/until.js';
+const FormDialog = (host) => {
+    const { description, auto, uncancelable, hideCancelButton, saveText = _('OK'), } = host, { onSave, disabled, save$, progress, ...form } = useValidatedForm$(host);
+    useEffect(() => {
+        if (!auto) {
+            return;
+        }
+        onSave();
+    }, [auto]);
+    return html ` <style>
+			${buttonStyles} ${renderStyles(form)}${styles}
+		</style>
+		${when(description, () => html `<p class="description">${description}</p>`)}
+		<div class="form" part="form">${renderFields(form)}</div>
+		<div class="buttons">
+			${renderFailure$(save$)}
+			${renderButton$({ save$, onSave, disabled, title: saveText, progress })}
+			${when(!hideCancelButton, () => html `<button class="button" value="cancel" ?disabled=${uncancelable}>
+						${_('Cancel')}
+					</button>`)}
+		</div>`;
+};
+customElements.define('cosmoz-form-dialog-next', dialog(FormDialog, { observedAttributes: ['allow-empty'] }));
+export const formDialog = (props) => {
+    if (!props)
+        return nothing;
+    const dialog = html `<cosmoz-form-dialog-next
+		?backdrop=${props.backdrop ?? true}
+		name=${ifDefined(props.name)}
+		?allow-empty=${props.allowEmpty}
+		.heading=${props.heading ?? props.title}
+		.description=${props.description}
+		.fields=${props.fields}
+		.initial=${props.initial}
+		.rules=${props.rules}
+		.onClose=${props.onClose}
+		.onSave=${props.onSave}
+		.auto=${props.auto}
+		.uncancelable=${props.uncancelable}
+		.hideCancelButton=${props.hideCancelButton}
+		.manualFocus=${props.manualFocus}
+		.saveText=${props.saveText}
+	></cosmoz-form-dialog-next>`;
+    return props.renderInPortal ? portal(dialog) : dialog;
+};
+export const formDialog$ = (props$) => until(Promise.resolve(invoke(props$)).then(formDialog, () => nothing), html `<cosmoz-dialog-loading></cosmoz-dialog-loading>`);

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

@@ -0,0 +1,11 @@
+import { nothing } from 'lit-html';
+import { Dialog } from './form-dialog';
+export declare const formDialogable: <T extends {
+    new (...args: any[]): any;
+}>(base: T) => {
+    new (...args: any[]): {
+        [x: string]: any;
+        renderFormDialog<T_1 extends object>(dialog: Dialog<T_1>): typeof nothing | (() => import("..").Renderable);
+    };
+} & T;
+//# sourceMappingURL=form-dialogable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialogable.d.ts","sourceRoot":"","sources":["../../src/form-dialog/form-dialogable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAc,MAAM,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,EACrE,MAAM,CAAC;kBADiD,GAAG,EAAE;;qCAIjC,MAAM;;KAkBjC,CAAC"}

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

@@ -0,0 +1,19 @@
+import { nothing } from 'lit-html';
+import { formDialog } from './form-dialog';
+export const formDialogable = (base) => class extends base {
+    renderFormDialog(dialog) {
+        return !dialog
+            ? nothing
+            : () => {
+                const onClose = (...args) => {
+                    this._dialog = undefined;
+                    dialog.onClose?.(...args);
+                };
+                return formDialog({
+                    ...dialog,
+                    onClose,
+                    onSave: (...args) => Promise.resolve(dialog.onSave?.(...args)).then(onClose),
+                });
+            };
+    }
+};

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

@@ -0,0 +1,4 @@
+export * from './form-dialog';
+export * from './form-dialogable';
+export * from './use-form-dialogable';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/form-dialog/index.js

@@ -0,0 +1,3 @@
+export * from './form-dialog';
+export * from './form-dialogable';
+export * from './use-form-dialogable';

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

@@ -0,0 +1,3 @@
+declare const styles: string;
+export default styles;
+//# sourceMappingURL=style.css.d.ts.map

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

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

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

@@ -0,0 +1,36 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+const styles = css `
+	.description {
+		padding: 0 24px;
+	}
+	.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;
+	}
+	.save {
+		font-weight: bold;
+	}
+	.save[data-progress] {
+		opacity: 0.6;
+	}
+	.failure {
+		color: #fc5c5b;
+		align-self: center;
+		flex: 1;
+	}
+	cz-spinner {
+		align-self: center;
+	}
+`;
+export default styles;

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

@@ -0,0 +1,12 @@
+import type { Dialog } from './form-dialog';
+export interface Dialogable<T extends object> extends Dialog<T> {
+    preventClose?: boolean;
+    preventRefresh?: boolean;
+}
+export declare const useFormDialogable: () => {
+    dialog: Dialogable<object> | undefined;
+    rtkn: unknown;
+    setRtkn: import("@pionjs/pion").StateUpdater<unknown>;
+    open: <T extends object>(dialog: Dialogable<T>) => void;
+};
+//# sourceMappingURL=use-form-dialogable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-dialogable.d.ts","sourceRoot":"","sources":["../../src/form-dialog/use-form-dialogable.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,MAAM,CAAC,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AACD,eAAO,MAAM,iBAAiB;;;;WAa1B,CAAC,SAAS,MAAM,UAAU,UAAU,CAAC,CAAC,CAAC;CAuB1C,CAAC"}

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

@@ -0,0 +1,24 @@
+import { useCallback, useState } from '@pionjs/pion';
+import { useOpened } from '../hooks/use-opened';
+export const useFormDialogable = () => {
+    const { opened: maybeDialog, onOpen, onClose, } = useOpened();
+    const [rtkn, setRtkn] = useState();
+    const dialog = typeof maybeDialog === 'boolean' ? undefined : maybeDialog;
+    return {
+        dialog,
+        rtkn,
+        setRtkn,
+        open: useCallback((dialog) => onOpen({
+            ...dialog,
+            onClose,
+            onSave: (values, initial, setProgress) => Promise.resolve(dialog.onSave?.(values, initial, setProgress)).then(() => {
+                if (!dialog?.preventRefresh) {
+                    setRtkn(Symbol('rtkn'));
+                }
+                if (!dialog?.preventClose) {
+                    onClose();
+                }
+            }),
+        }), [onClose]),
+    };
+};

package/dist/helpers.d.ts

@@ -0,0 +1,11 @@
+import { Field } from './types';
+export { invoke } from '@neovici/cosmoz-utils/function';
+type InvokeValueReturn<F, V> = F extends (...args: any) => infer R ? R : V;
+export declare function invokeValue<V, A extends any[], F extends ((value: V, ...args: A) => any) | undefined | null>(valueFn: F, value: V, ...args: A): InvokeValueReturn<F, V>;
+interface Initiatable<T extends object, K extends keyof T, V extends T[K]> {
+    id: K;
+    initiate: (value: V, values: T) => any;
+}
+export declare const initiate: <T extends object, K extends keyof T, V extends T[K]>(obj: T, fields: Initiatable<T, K, V>[]) => { [key in K]: ReturnType<Initiatable<T, K, V>["initiate"]>; };
+export declare const primeval: ((<T extends object, K extends keyof T, V extends T[K], F extends Field<T, K, V>>(value: V, values: T, { options, valueProperty }: F) => V | ({} | V)[]) | (<T extends object, K extends keyof T, V extends T[K], F extends Field<T, K, V>>(value: V, values: T, { valueProperty }: F) => any[] | (string extends infer T_1 ? T_1 extends string ? T_1 extends keyof NonNullable<V> ? NonNullable<V>[T_1] : undefined : never : never)))[];
+//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC3E,wBAAgB,WAAW,CAC1B,CAAC,EACD,CAAC,SAAS,GAAG,EAAE,EACf,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,IAAI,EAC3D,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAE3D;AAED,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACxE,EAAE,EAAE,CAAC,CAAC;IACN,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,GAAG,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAC3E,KAAK,CAAC,EACN,QAAQ,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAOzB,GACH,GAAG,IAAI,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,GACxD,CAAC;AAMH,eAAO,MAAM,QAAQ,KAEnB,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,SAEjB,CAAC,UACA,CAAC,8BACmB,CAAC,yBAa7B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACd,CAAC,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,SAEjB,CAAC,UACA,CAAC,qBACU,CAAC,qJAMrB,CAAC"}

package/dist/helpers.js

@@ -0,0 +1,26 @@
+import { array } from '@neovici/cosmoz-utils/array';
+import { prop } from '@neovici/cosmoz-utils/object';
+export { invoke } from '@neovici/cosmoz-utils/function';
+export function invokeValue(valueFn, value, ...args) {
+    return valueFn ? valueFn(value, ...args) : value;
+}
+// TODO: Better typing with better inference
+export const initiate = (obj, fields) => Object.fromEntries(fields.map(({ id, initiate }) => [
+    id,
+    initiate ? initiate(obj[id], obj) : obj[id],
+]));
+/*
+ * Transforms primitive values to an item from options
+ *  and selection back to a primitive value on change.
+ */
+export const primeval = [
+    (value, values, { options, valueProperty }) => options
+        ? array(value).map((v) => (['string', 'number'].includes(typeof v) &&
+            options.find((c) => prop(valueProperty)(c) === v)) ??
+            v)
+        : value,
+    (value, values, { valueProperty }) => value &&
+        (Array.isArray(value)
+            ? value.map(prop(valueProperty))
+            : prop(valueProperty)(value)),
+];

package/dist/hooks/use-opened.d.ts

@@ -0,0 +1,7 @@
+export declare const useOpened: <T>() => {
+    opened: boolean | T;
+    onOpen: (opened: T | boolean) => void;
+    onClose: () => void;
+    onToggle: () => void;
+};
+//# sourceMappingURL=use-opened.d.ts.map

package/dist/hooks/use-opened.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-opened.d.ts","sourceRoot":"","sources":["../../src/hooks/use-opened.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,CAAC;;qBAKP,CAAC,GAAG,OAAO;;;CAM9B,CAAC"}

package/dist/hooks/use-opened.js

@@ -0,0 +1,10 @@
+import { useState, useMemo } from '@pionjs/pion';
+export const useOpened = () => {
+    const [opened, setOpened] = useState(() => false);
+    return useMemo(() => ({
+        opened,
+        onOpen: (opened) => setOpened(opened ?? true),
+        onClose: () => setOpened(false),
+        onToggle: () => setOpened((opened) => !opened),
+    }), [opened]);
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './helpers';
+export * from './inputs';
+export * from './render';
+export * from './validation';
+export * from './use-form';
+export * from './use-validated-form';
+export * from './use-validated-form$';
+export * from './use-items';
+export * from './touch';
+export * from './use-items-filter';
+export * from './form-dialog';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAE9B,mBAAmB,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,11 @@
+export * from './helpers';
+export * from './inputs';
+export * from './render';
+export * from './validation';
+export * from './use-form';
+export * from './use-validated-form';
+export * from './use-validated-form$';
+export * from './use-items';
+export * from './touch';
+export * from './use-items-filter';
+export * from './form-dialog';

package/dist/inputs/autocomplete.d.ts

@@ -0,0 +1,25 @@
+import '@neovici/cosmoz-autocomplete';
+import { Resolvable } from '../types';
+type OptionsOpts<T, V> = {
+    active: boolean;
+    query: string;
+    value: V;
+    values: T;
+};
+export interface AutocompleteProps<T extends object, K extends keyof T, V extends T[K]> {
+    options?: Resolvable<unknown[] | false | undefined, [OptionsOpts<T, V>]>;
+    limit?: number;
+    textProperty?: string;
+    valueProperty?: string;
+    keepOpened?: boolean;
+    keepQuery?: boolean;
+    wrap?: boolean;
+    showSingle?: boolean;
+    preserveOrder?: boolean;
+    itemRenderer?: unknown;
+    textual?: unknown;
+    externalSearch?: boolean;
+}
+export declare const autocomplete: <T extends object, K extends keyof T, V extends T[K]>({ field, value, values, onChange: update, ...thru }: import("..").InputProps<T, K, V>) => import("..").Renderable;
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/inputs/autocomplete.ts"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AAGtC,OAAO,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAGrD,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,IAAI;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,WAAW,iBAAiB,CACjC,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,CAAC,EACjB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAEd,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACzE,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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AAOD,eAAO,MAAM,YAAY,GACvB,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,mHAiEpD,CAAC"}

package/dist/inputs/autocomplete.js

@@ -0,0 +1,40 @@
+import { html } from 'lit-html';
+import { live } from 'lit-html/directives/live.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { guard } from 'lit-html/directives/guard.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, options, limit, min, textProperty, valueProperty, value, values, itemRenderer, keepOpened, keepQuery, placeholder, wrap, showSingle, preserveOrder, title, textual, description, externalSearch, ...thru }) => {
+    return html `<cosmoz-autocomplete
+			class="input input-autocomplete"
+			?data-warning=${!!warning}
+			name=${id}
+			?disabled=${disabled}
+			?wrap=${wrap}
+			?no-label-float=${noLabelFloat}
+			?always-float-label=${alwaysFloatLabel}
+			?invalid=${!!error}
+			?keep-opened=${!!keepOpened}
+			?keep-query=${!!keepQuery}
+			?show-single=${!!showSingle}
+			?preserve-order=${!!preserveOrder}
+			.placeholder=${placeholder}
+			.itemRenderer=${ifDefined(itemRenderer)}
+			.errorMessage=${error}
+			.label=${label}
+			.value=${live(value)}
+			.source=${guard([options, value, values], () => typeof options === 'function'
+        ? (info) => options({ ...thru, ...info, value, values })
+        : options)}
+			.textProperty=${textProperty}
+			.valueProperty=${valueProperty}
+			.limit=${limit}
+			.min=${min}
+			.title=${ifDefined(title)}
+			.textual=${textual}
+			.onChange=${(options) => onChange((limit === 1 ? options?.[0] : options))}
+			?external-search=${externalSearch}
+			>${renderContents({ suffix, warning, description })}</cosmoz-autocomplete
+		>`;
+});