@smartsoft001/crud-shell-react 0.0.0-stage → 2.193.0

package/src/lib/pages/item/item-page.types.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode, RefObject } from 'react';
+import { IEntity } from '@smartsoft001/domain-core';
+import { IDetailsOptions, SmartFormGroup } from '@smartsoft001/react';
+/** The props of `<SmartCrudItemPage>` (the Angular `<smart-crud-item-page>`). */
+export interface SmartCrudItemPageProps {
+    /**
+     * The id of the item (the Angular `:id` route). Without it the page creates
+     * a new item, as on the Angular `add` route.
+     */
+    id?: string;
+    /**
+     * The path of the list. After a create, or a save without details, the page
+     * navigates there; without it, it goes back in the history, as the Angular
+     * page did with `Location.back()`.
+     */
+    basePath?: string;
+    /**
+     * The Angular `ng-content`: handed to the body. The standard body does not
+     * render it (its Angular template has no `ng-content`); a body registered
+     * as `crud-item-page` can.
+     */
+    children?: ReactNode;
+}
+/**
+ * The props of the item page body: `SmartCrudItemPageStandard` or a body
+ * registered as `components['crud-item-page']` on `SmartProvider` (the inputs
+ * and outputs of the Angular `CrudItemPageBaseComponent`).
+ */
+export interface SmartCrudItemPageBodyProps<T extends IEntity<string> = any> {
+    detailsOptions?: IDetailsOptions<T>;
+    /** `'create'`, `'update'` or `'details'`. */
+    mode?: string;
+    uniqueProvider?: (values: Record<keyof T, any>) => Promise<boolean>;
+    /** The values of the changed fields (`onPartialChange`). */
+    onPartialChange?: (value: Partial<T>) => void;
+    /** The form value (`onChange`). */
+    onChange?: (value: T) => void;
+    /** The form validity (`onValidChange`). */
+    onValidChange?: (valid: boolean) => void;
+    /**
+     * Where the body keeps the form it renders (the Angular `getForm()`): the
+     * page validates it before a create or a save. `useCrudItemPageBase` fills
+     * it.
+     */
+    formRef?: RefObject<SmartFormGroup | null>;
+    children?: ReactNode;
+}

package/src/lib/pages/item/item-page.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=item-page.types.js.map

package/src/lib/pages/item/item-page.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-page.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/pages/item/item-page.types.ts"],"names":[],"mappings":""}

package/src/lib/pages/item/standard/item-page-standard.d.ts

@@ -0,0 +1,10 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudItemPageBodyProps } from '../item-page.types';
+/**
+ * The default item page body (`<smart-crud-item-standard-page>`, the Angular
+ * `ItemStandardComponent`): `SmartDetails` of `detailsOptions` in the
+ * details mode, else `SmartForm` of the selected item for the mode, reporting
+ * its changes, value and validity. `children` are not rendered, as the
+ * Angular template had no `ng-content`.
+ */
+export declare function SmartCrudItemPageStandard<T extends IEntity<string>>(props: SmartCrudItemPageBodyProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/pages/item/standard/item-page-standard.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudItemPageStandard = SmartCrudItemPageStandard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@smartsoft001/react");
+const use_crud_item_page_base_1 = require("../use-crud-item-page-base");
+/**
+ * The default item page body (`<smart-crud-item-standard-page>`, the Angular
+ * `ItemStandardComponent`): `SmartDetails` of `detailsOptions` in the
+ * details mode, else `SmartForm` of the selected item for the mode, reporting
+ * its changes, value and validity. `children` are not rendered, as the
+ * Angular template had no `ng-content`.
+ */
+function SmartCrudItemPageStandard(props) {
+    const { mode, detailsOptions, onPartialChange, onChange, onValidChange } = props;
+    const { formOptions } = (0, use_crud_item_page_base_1.useCrudItemPageBase)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mode === 'details' ? (detailsOptions ? ((0, jsx_runtime_1.jsx)(react_1.SmartDetails, { options: detailsOptions })) : null) : formOptions ? ((0, jsx_runtime_1.jsx)(react_1.SmartForm, { options: formOptions, onValuePartialChange: onPartialChange, onValueChange: onChange, onValidChange: onValidChange })) : null, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }));
+}
+//# sourceMappingURL=item-page-standard.js.map

package/src/lib/pages/item/standard/item-page-standard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-page-standard.js","sourceRoot":"","sources":["../../../../../../../../../../packages/crud/shell/react/src/lib/pages/item/standard/item-page-standard.tsx"],"names":[],"mappings":";;AAaA,8DAyBC;;AArCD,+CAA8D;AAG9D,wEAAiE;AAEjE;;;;;;GAMG;AACH,SAAgB,yBAAyB,CACvC,KAAoC;IAEpC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,GACtE,KAAK,CAAC;IACR,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,6CAAmB,EAAI,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,6DACG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,cAAc,CAAC,CAAC,CAAC,CACf,uBAAC,oBAAY,IAAC,OAAO,EAAE,cAAc,GAAI,CAC1C,CAAC,CAAC,CAAC,IAAI,CACT,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,uBAAC,iBAAS,IACR,OAAO,EAAE,WAAW,EACpB,oBAAoB,EAAE,eAAe,EACrC,aAAa,EAAE,QAAQ,EACvB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,IAAI,EACR,gCAAM,EACN,gCAAM,IACL,CACJ,CAAC;AACJ,CAAC"}

package/src/lib/pages/item/use-crud-item-page-base.d.ts

@@ -0,0 +1,22 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { IFormOptions } from '@smartsoft001/react';
+import { SmartCrudItemPageBodyProps } from './item-page.types';
+/**
+ * What every item page body shares (the Angular `CrudItemPageBaseComponent`):
+ * `config`, `facade`, the `selected` item and, outside the details mode, the
+ * form of the item: `formOptions` (the Angular `smartFormOptions` pipe over
+ * `selected`, `mode`, `config.type`, `uniqueProvider` and
+ * `config.inputComponents`, with the built form as `control`) and `form`,
+ * which is put in `formRef` for the page to validate (the Angular
+ * `getForm()`). Render `<SmartForm options={formOptions}>` once both exist.
+ *
+ * A new form is built when the selected item, the mode or the provider
+ * change; while creating, the selected item is ignored.
+ */
+export declare function useCrudItemPageBase<T extends IEntity<string>>({ mode, uniqueProvider, formRef, }: SmartCrudItemPageBodyProps<T>): {
+    config: import("../../crud.config").CrudConfig<T> & Partial<import("../../crud.config").CrudFullConfig<T>>;
+    facade: import("../../state").CrudFacade<T>;
+    selected: T | null | undefined;
+    formOptions: IFormOptions<T> | null;
+    form: import("@smartsoft001/react").SmartFormGroup<Record<string, any>> | null;
+};

package/src/lib/pages/item/use-crud-item-page-base.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudItemPageBase = useCrudItemPageBase;
+const react_1 = require("react");
+const react_2 = require("@smartsoft001/react");
+const crud_context_1 = require("../../crud.context");
+const form_options_1 = require("../../factories/form-options");
+const hooks_1 = require("../../hooks");
+/**
+ * What every item page body shares (the Angular `CrudItemPageBaseComponent`):
+ * `config`, `facade`, the `selected` item and, outside the details mode, the
+ * form of the item: `formOptions` (the Angular `smartFormOptions` pipe over
+ * `selected`, `mode`, `config.type`, `uniqueProvider` and
+ * `config.inputComponents`, with the built form as `control`) and `form`,
+ * which is put in `formRef` for the page to validate (the Angular
+ * `getForm()`). Render `<SmartForm options={formOptions}>` once both exist.
+ *
+ * A new form is built when the selected item, the mode or the provider
+ * change; while creating, the selected item is ignored.
+ */
+function useCrudItemPageBase({ mode, uniqueProvider, formRef, }) {
+    const config = (0, crud_context_1.useCrudConfig)();
+    const facade = (0, crud_context_1.useCrudFacade)();
+    const selected = (0, hooks_1.useCrudState)((state) => state.selected);
+    const item = mode === 'create' ? null : selected;
+    const type = config?.type;
+    const inputComponents = config.inputComponents;
+    const options = (0, react_1.useMemo)(() => mode && mode !== 'details'
+        ? (0, form_options_1.getCrudFormOptions)(item, mode, type, uniqueProvider, inputComponents)
+        : null, [item, mode, type, uniqueProvider, inputComponents]);
+    const form = (0, react_2.useModelForm)(options?.model, {
+        mode: options?.mode,
+        uniqueProvider: options?.uniqueProvider,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!formRef)
+            return undefined;
+        formRef.current = form;
+        return () => {
+            if (formRef.current === form)
+                formRef.current = null;
+        };
+    }, [form, formRef]);
+    const formOptions = (0, react_1.useMemo)(() => (options && form ? { ...options, control: form } : null), [options, form]);
+    return { config, facade, selected, formOptions, form };
+}
+//# sourceMappingURL=use-crud-item-page-base.js.map

package/src/lib/pages/item/use-crud-item-page-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-item-page-base.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/pages/item/use-crud-item-page-base.ts"],"names":[],"mappings":";;AAsBA,kDAmDC;AAzED,iCAA2C;AAG3C,+CAAiE;AAGjE,qDAAkE;AAClE,+DAAkE;AAClE,uCAA2C;AAE3C;;;;;;;;;;;GAWG;AACH,SAAgB,mBAAmB,CAA4B,EAC7D,IAAI,EACJ,cAAc,EACd,OAAO,GACuB;IAC9B,MAAM,MAAM,GAAG,IAAA,4BAAa,GAAK,CAAC;IAClC,MAAM,MAAM,GAAG,IAAA,4BAAa,GAAK,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAA,oBAAY,EAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAC1B,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACjD,MAAM,IAAI,GAAG,MAAM,EAAE,IAAI,CAAC;IAC1B,MAAM,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CACH,IAAI,IAAI,IAAI,KAAK,SAAS;QACxB,CAAC,CAAC,IAAA,iCAAkB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,eAAe,CAChB;QACH,CAAC,CAAC,IAAI,EACV,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,eAAe,CAAC,CACpD,CAAC;IAEF,MAAM,IAAI,GAAG,IAAA,oBAAY,EAAC,OAAO,EAAE,KAAK,EAAE;QACxC,IAAI,EAAE,OAAO,EAAE,IAAI;QACnB,cAAc,EAAE,OAAO,EAAE,cACwC;KAClE,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAE/B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI;gBAAE,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAC9D,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AACzD,CAAC"}

package/src/lib/pages/item/use-crud-item-page.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentType } from 'react';
+import { IEntity } from '@smartsoft001/domain-core';
+import { IDetailsOptions, IPageOptions, SmartFormGroup } from '@smartsoft001/react';
+import { SmartCrudItemPageProps } from './item-page.types';
+import { CrudFullConfig } from '../../crud.config';
+/**
+ * The logic of the item page (the Angular `ItemComponent`), for
+ * `SmartCrudItemPage` or a page of your own around the same feature:
+ *
+ * - `mode`: `'create'` without an `id`; with one `'details'` when
+ *   `config.details` is set, else `'update'`; the `edit` query param (or the
+ *   edit button) switches to `'update'`; the item of `id` is selected
+ *   through the facade;
+ * - `pageOptions`: the title (`add`, `<titleKey> - change`,
+ *   `<titleKey> - details`), the back button, no menu button, `variant`, and
+ *   the buttons of the mode: add (create), cancel + save (update), edit
+ *   (details, with `config.edit` and the model's `update.enabled`). Add and
+ *   save validate the form of the body first (`formRef`) and report the
+ *   invalid fields in a toast; add creates the form value, save sends the
+ *   changed values with the id (`updatePartial`). Afterwards the page leaves
+ *   for `basePath` (back in the history without it), or shows the details
+ *   again when there are details;
+ * - `detailsOptions` (with `config.details`), `uniqueProvider` (asks the
+ *   service whether another item has the values), the body callbacks and
+ *   `formRef`;
+ * - `TopComponent` / `BottomComponent`: the `components` of `config.add`
+ *   while creating, of `config.edit` while updating.
+ *
+ * Switching between creating and an id needs a new page (a `key`), as the
+ * Angular `add` and `:id` routes created a new component.
+ */
+export declare function useCrudItemPage<T extends IEntity<string>>({ id, basePath, }?: SmartCrudItemPageProps): {
+    config: CrudFullConfig<T>;
+    mode: string;
+    pageOptions: IPageOptions;
+    detailsOptions: IDetailsOptions<T> | undefined;
+    uniqueProvider: (values: Record<keyof T, any>) => Promise<boolean>;
+    onPartialChange: (val: Partial<T>) => void;
+    onChange: (val: T) => void;
+    onValidChange: (val: boolean) => void;
+    formRef: import("react").RefObject<SmartFormGroup<Record<string, any>> | null>;
+    TopComponent: ComponentType | undefined;
+    BottomComponent: ComponentType | undefined;
+};

package/src/lib/pages/item/use-crud-item-page.js

@@ -0,0 +1,297 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrudItemPage = useCrudItemPage;
+const react_1 = require("react");
+const models_1 = require("@smartsoft001/models");
+const react_2 = require("@smartsoft001/react");
+const utils_1 = require("@smartsoft001/utils");
+const crud_context_1 = require("../../crud.context");
+const hooks_1 = require("../../hooks");
+const use_crud_page_config_1 = require("../use-crud-page-config");
+/** The `components` of an object `config.add` / `config.edit` / `config.details`. */
+function getSlots(value) {
+    return value && typeof value === 'object' && 'components' in value
+        ? value.components
+        : undefined;
+}
+/** The first paragraph of an HTML text (`<p>a</p><p>b</p>` → `a`). */
+function removeParagraph(val) {
+    if (!val || val.indexOf('<p>') !== 0)
+        return val;
+    if (typeof document === 'undefined') {
+        return /^<p>([\s\S]*?)<\/p>/.exec(val)?.[1] ?? val;
+    }
+    const div = document.createElement('div');
+    div.innerHTML = val;
+    return div.querySelectorAll('p').item(0).innerHTML;
+}
+/** Whether the `edit` query param of `url` is set (`?edit=1`). */
+function hasEditParam(url) {
+    const query = url.split('?')[1]?.split('#')[0] ?? '';
+    return !!new URLSearchParams(query).get('edit');
+}
+/**
+ * Collects the labels of the invalid controls under `control`: nested groups
+ * as `parent > child`, array entries as `field(1)`, a `customMessage` error
+ * in brackets.
+ */
+function getInvalidFields(control, invalidFields, baseField, t, key = null) {
+    if (control.valid)
+        return;
+    const field = key ? baseField + ' > ' + t('MODEL.' + key) : baseField;
+    if (control.errors?.['customMessage']) {
+        invalidFields.push(field + ` (${control.errors['customMessage']})`);
+        return;
+    }
+    if (control instanceof react_2.SmartFormControl) {
+        invalidFields.push(field);
+    }
+    if (control instanceof react_2.SmartFormGroup) {
+        Object.keys(control.controls).forEach((groupKey) => {
+            getInvalidFields(control.controls[groupKey], invalidFields, field, t, groupKey);
+        });
+    }
+    if (control instanceof react_2.SmartFormArray) {
+        control.controls.forEach((c, index) => {
+            getInvalidFields(c, invalidFields, field + `(${index + 1})`, t);
+        });
+    }
+}
+/**
+ * The logic of the item page (the Angular `ItemComponent`), for
+ * `SmartCrudItemPage` or a page of your own around the same feature:
+ *
+ * - `mode`: `'create'` without an `id`; with one `'details'` when
+ *   `config.details` is set, else `'update'`; the `edit` query param (or the
+ *   edit button) switches to `'update'`; the item of `id` is selected
+ *   through the facade;
+ * - `pageOptions`: the title (`add`, `<titleKey> - change`,
+ *   `<titleKey> - details`), the back button, no menu button, `variant`, and
+ *   the buttons of the mode: add (create), cancel + save (update), edit
+ *   (details, with `config.edit` and the model's `update.enabled`). Add and
+ *   save validate the form of the body first (`formRef`) and report the
+ *   invalid fields in a toast; add creates the form value, save sends the
+ *   changed values with the id (`updatePartial`). Afterwards the page leaves
+ *   for `basePath` (back in the history without it), or shows the details
+ *   again when there are details;
+ * - `detailsOptions` (with `config.details`), `uniqueProvider` (asks the
+ *   service whether another item has the values), the body callbacks and
+ *   `formRef`;
+ * - `TopComponent` / `BottomComponent`: the `components` of `config.add`
+ *   while creating, of `config.edit` while updating.
+ *
+ * Switching between creating and an id needs a new page (a `key`), as the
+ * Angular `add` and `:id` routes created a new component.
+ */
+function useCrudItemPage({ id, basePath, } = {}) {
+    const config = (0, use_crud_page_config_1.useCrudPageConfig)();
+    const facade = (0, crud_context_1.useCrudFacade)();
+    const service = (0, crud_context_1.useCrudService)();
+    const navigation = (0, react_2.useNavigation)();
+    const toastService = (0, react_2.useToastService)();
+    const detailsService = (0, react_2.useDetailsService)();
+    const t = (0, react_2.useTranslate)();
+    const selected = (0, hooks_1.useCrudState)((state) => state.selected);
+    const create = id === undefined;
+    const [mode, setMode] = (0, react_1.useState)(() => create ? 'create' : config.details ? 'details' : 'update');
+    // Before the body renders, as the Angular `ngOnInit` ran before the view:
+    // the details set the root while rendering.
+    (0, react_1.useState)(() => detailsService.init());
+    const formRef = (0, react_1.useRef)(null);
+    const formValue = (0, react_1.useRef)(undefined);
+    const formPartialValue = (0, react_1.useRef)(undefined);
+    // Kept as the Angular `formValid`; the buttons validate the form itself.
+    const formValid = (0, react_1.useRef)(false);
+    const idRef = (0, react_1.useRef)(id);
+    (0, react_1.useEffect)(() => {
+        idRef.current = id;
+    });
+    (0, react_1.useEffect)(() => {
+        if (id !== undefined)
+            facade.select(id);
+    }, [facade, id]);
+    (0, react_1.useEffect)(() => {
+        if (create)
+            return undefined;
+        const check = (url) => {
+            if (hasEditParam(url))
+                setMode('update');
+        };
+        check(navigation.getCurrentUrl());
+        return navigation.subscribe(check);
+    }, [create, navigation]);
+    // One provider for the page's lifetime: it is part of the form options,
+    // and a new one would build the form again.
+    const uniqueProvider = (0, react_1.useCallback)(async (values) => {
+        const query = [];
+        const filter = { query };
+        Object.keys(values).forEach((key) => {
+            query.push({
+                key: key,
+                value: values[key],
+                type: '=',
+            });
+        });
+        if (idRef.current) {
+            query.push({ key: 'id', value: idRef.current, type: '!=' });
+        }
+        const { totalCount } = await service.getList(filter);
+        return !totalCount;
+    }, [service]);
+    const onPartialChange = (0, react_1.useCallback)((val) => {
+        formPartialValue.current = val;
+    }, []);
+    const onChange = (0, react_1.useCallback)((val) => {
+        formValue.current = val;
+    }, []);
+    const onValidChange = (0, react_1.useCallback)((val) => {
+        formValid.current = val;
+    }, []);
+    const checkFirstInvalid = (0, react_1.useCallback)(() => {
+        const form = formRef.current;
+        // Nothing has been built yet, so there is nothing valid to submit.
+        if (!form)
+            return true;
+        if (form.valid)
+            return false;
+        const invalidFields = [];
+        getInvalidFields(form, invalidFields, '', t);
+        void toastService.info({
+            title: t('INPUT.ERRORS.requires'),
+            message: invalidFields.slice(0, 3).join('<br/>'),
+        });
+        return true;
+    }, [t, toastService]);
+    const leave = (0, react_1.useCallback)(() => {
+        if (basePath !== undefined)
+            navigation.navigate(basePath);
+        else
+            navigation.back();
+    }, [basePath, navigation]);
+    const modelOptions = (0, react_1.useMemo)(() => (0, models_1.getModelOptions)(config.type), [config]);
+    const endButtons = (0, react_1.useMemo)(() => {
+        switch (mode) {
+            case 'create':
+                return [
+                    {
+                        icon: 'add',
+                        text: 'add',
+                        handler: () => {
+                            if (checkFirstInvalid())
+                                return;
+                            facade.create(formValue.current);
+                            leave();
+                        },
+                    },
+                ];
+            case 'update':
+                return [
+                    ...(config.details
+                        ? [
+                            {
+                                icon: 'close',
+                                text: 'cancel',
+                                handler: () => setMode('details'),
+                                disabled: false,
+                            },
+                        ]
+                        : []),
+                    {
+                        icon: 'save',
+                        text: 'save',
+                        handler: () => {
+                            if (checkFirstInvalid())
+                                return;
+                            facade.updatePartial({
+                                ...formPartialValue.current,
+                                id: id,
+                            });
+                            if (config.details)
+                                setMode('details');
+                            else
+                                leave();
+                        },
+                    },
+                ];
+            case 'details':
+                return config.edit &&
+                    (!modelOptions?.update?.enabled ||
+                        utils_1.SpecificationService.valid(selected, modelOptions.update.enabled))
+                    ? [
+                        {
+                            icon: 'create',
+                            text: 'edit',
+                            handler: () => setMode('update'),
+                            disabled: false,
+                        },
+                    ]
+                    : [];
+            default:
+                return undefined;
+        }
+    }, [
+        mode,
+        config,
+        modelOptions,
+        selected,
+        id,
+        facade,
+        checkFirstInvalid,
+        leave,
+    ]);
+    const title = (0, react_1.useMemo)(() => {
+        const titleKey = modelOptions?.titleKey;
+        const prefix = titleKey && selected
+            ? removeParagraph(selected[titleKey]) + ' - '
+            : '';
+        switch (mode) {
+            case 'create':
+                return 'add';
+            case 'update':
+                return prefix + t('change');
+            case 'details':
+                return prefix + t('details');
+            default:
+                return undefined;
+        }
+    }, [mode, modelOptions, selected, t]);
+    const pageOptions = (0, react_1.useMemo)(() => ({
+        title: title || '',
+        variant: config.variant,
+        showBackButton: true,
+        hideMenuButton: true,
+        endButtons,
+    }), [title, config, endButtons]);
+    const detailsOptions = (0, react_1.useMemo)(() => {
+        if (!config.details)
+            return undefined;
+        const slots = getSlots(config.details);
+        return {
+            type: config.type,
+            item: selected,
+            cellPipe: config.details.cellPipe,
+            componentFactories: { top: slots?.top, bottom: slots?.bottom },
+        };
+    }, [config, selected]);
+    const slots = mode === 'create'
+        ? getSlots(config.add)
+        : mode === 'update'
+            ? getSlots(config.edit)
+            : undefined;
+    const TopComponent = slots?.top;
+    const BottomComponent = slots?.bottom;
+    return {
+        config,
+        mode,
+        pageOptions,
+        detailsOptions,
+        uniqueProvider,
+        onPartialChange,
+        onChange,
+        onValidChange,
+        formRef,
+        TopComponent,
+        BottomComponent,
+    };
+}
+//# sourceMappingURL=use-crud-item-page.js.map

package/src/lib/pages/item/use-crud-item-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-crud-item-page.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/pages/item/use-crud-item-page.ts"],"names":[],"mappings":"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"}

package/src/lib/pages/list/list-page.d.ts

@@ -0,0 +1,17 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudListPageProps } from './list-page.types';
+/**
+ * `<smart-crud-list-page>` (the Angular `ListComponent` of the
+ * `CrudFullModule` `''` route): a `SmartPage` with the title, search and end
+ * buttons of `useCrudListPage`, `config.list.components.top`, and the body:
+ * the one registered as `components['crud-list-page']` on `SmartProvider`
+ * (the Angular `crud-list-page` dynamic component), else
+ * `SmartCrudListPageStandard`. Renders nothing until the feature's filter is
+ * set by the first read. Render it inside the feature's `CrudProvider` with a
+ * `CrudFullConfig`.
+ *
+ * Like the Angular page, a registered body renders in the
+ * `.dynamic-content` element. The list options are built synchronously, so
+ * unlike the Angular page the body never gets `null` ones.
+ */
+export declare function SmartCrudListPage<T extends IEntity<string>>(props: SmartCrudListPageProps): import("react/jsx-runtime").JSX.Element | null;

package/src/lib/pages/list/list-page.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartCrudListPage = SmartCrudListPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@smartsoft001/react");
+const list_page_standard_1 = require("./standard/list-page-standard");
+const use_crud_list_page_1 = require("./use-crud-list-page");
+/**
+ * `<smart-crud-list-page>` (the Angular `ListComponent` of the
+ * `CrudFullModule` `''` route): a `SmartPage` with the title, search and end
+ * buttons of `useCrudListPage`, `config.list.components.top`, and the body:
+ * the one registered as `components['crud-list-page']` on `SmartProvider`
+ * (the Angular `crud-list-page` dynamic component), else
+ * `SmartCrudListPageStandard`. Renders nothing until the feature's filter is
+ * set by the first read. Render it inside the feature's `CrudProvider` with a
+ * `CrudFullConfig`.
+ *
+ * Like the Angular page, a registered body renders in the
+ * `.dynamic-content` element. The list options are built synchronously, so
+ * unlike the Angular page the body never gets `null` ones.
+ */
+function SmartCrudListPage(props) {
+    const { children } = props;
+    const { config, filter, pageOptions, listOptions, TopComponent } = (0, use_crud_list_page_1.useCrudListPage)(props);
+    const Body = (0, react_1.useSmartComponent)('crud-list-page', list_page_standard_1.SmartCrudListPageStandard);
+    const standard = Body === list_page_standard_1.SmartCrudListPageStandard;
+    if (!filter)
+        return null;
+    const body = (0, jsx_runtime_1.jsx)(Body, { listOptions: listOptions, children: children });
+    return ((0, jsx_runtime_1.jsxs)(react_1.SmartPage, { options: pageOptions, className: config.className || '', children: [(0, jsx_runtime_1.jsx)("div", { children: TopComponent ? (0, jsx_runtime_1.jsx)(TopComponent, {}) : null }), standard ? body : null, (0, jsx_runtime_1.jsx)("div", { className: "dynamic-content", children: !standard ? body : null })] }));
+}
+//# sourceMappingURL=list-page.js.map

package/src/lib/pages/list/list-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-page.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/pages/list/list-page.tsx"],"names":[],"mappings":";;AAwBA,8CAwBC;;AA/CD,+CAAmE;AAMnE,sEAA0E;AAC1E,6DAAuD;AAEvD;;;;;;;;;;;;;GAaG;AACH,SAAgB,iBAAiB,CAC/B,KAA6B;IAE7B,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAC9D,IAAA,oCAAe,EAAI,KAAK,CAAC,CAAC;IAC5B,MAAM,IAAI,GAAG,IAAA,yBAAiB,EAC5B,gBAAgB,EAChB,8CAAyB,CAC1B,CAAC;IACF,MAAM,QAAQ,GAAG,IAAI,KAAK,8CAAyB,CAAC;IAEpD,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,IAAI,GAAG,uBAAC,IAAI,IAAC,WAAW,EAAE,WAAW,YAAG,QAAQ,GAAQ,CAAC;IAE/D,OAAO,CACL,wBAAC,iBAAS,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,aAChE,0CAAM,YAAY,CAAC,CAAC,CAAC,uBAAC,YAAY,KAAG,CAAC,CAAC,CAAC,IAAI,GAAO,EAElD,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACvB,gCAAK,SAAS,EAAC,iBAAiB,YAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAO,IACtD,CACb,CAAC;AACJ,CAAC"}

package/src/lib/pages/list/list-page.types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { IEntity } from '@smartsoft001/domain-core';
+import { IListOptions } from '@smartsoft001/react';
+/** The props of `<SmartCrudListPage>` (the Angular `<smart-crud-list-page>`). */
+export interface SmartCrudListPageProps {
+    /**
+     * The path of the list, which the add button (`<basePath>/add`) and the
+     * item links (`<basePath>/<id>`) are relative to. The current path when
+     * omitted, as the Angular page used the router's current URL.
+     */
+    basePath?: string;
+    /**
+     * The Angular `ng-content`: handed to the body. The standard body does not
+     * render it (its Angular template has no `ng-content`); a body registered
+     * as `crud-list-page` can.
+     */
+    children?: ReactNode;
+}
+/**
+ * The props of the list page body: `SmartCrudListPageStandard` or a body
+ * registered as `components['crud-list-page']` on `SmartProvider` (the inputs
+ * of the Angular `CrudListPageBaseComponent`).
+ */
+export interface SmartCrudListPageBodyProps<T extends IEntity<string> = any> {
+    listOptions: IListOptions<T> | null;
+    children?: ReactNode;
+}

package/src/lib/pages/list/list-page.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=list-page.types.js.map

package/src/lib/pages/list/list-page.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-page.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/crud/shell/react/src/lib/pages/list/list-page.types.ts"],"names":[],"mappings":""}

package/src/lib/pages/list/standard/list-page-standard.d.ts

@@ -0,0 +1,13 @@
+import { IEntity } from '@smartsoft001/domain-core';
+import { SmartCrudListPageBodyProps } from '../list-page.types';
+/**
+ * The default list page body (`<smart-crud-list-standard-page>`, the Angular
+ * `ListStandardComponent`): the active filters (`SmartCrudFiltersConfig`)
+ * and `SmartList`; with `config.list.groups` the list is hidden behind
+ * `SmartCrudGroup` unless a text is searched. `children` are not rendered,
+ * as the Angular template had no `ng-content`.
+ *
+ * The `hidden` the Angular template set on `<smart-list>` is set on a `div`
+ * around it, rendered only when there are groups.
+ */
+export declare function SmartCrudListPageStandard<T extends IEntity<string>>({ listOptions, }: SmartCrudListPageBodyProps<T>): import("react/jsx-runtime").JSX.Element;